diff --git a/app/Actions/ActivityService.php b/app/Actions/ActivityService.php
index 37cd0a6a4..11f8b8732 100644
--- a/app/Actions/ActivityService.php
+++ b/app/Actions/ActivityService.php
@@ -103,7 +103,7 @@ class ActivityService
      * @param int $page
      * @return array
      */
-    public function entityActivity($entity, $count = 20, $page = 0)
+    public function entityActivity($entity, $count = 20, $page = 1)
     {
         if ($entity->isA('book')) {
             $query = $this->activity->where('book_id', '=', $entity->id);
@@ -114,7 +114,7 @@ class ActivityService
         
         $activity = $this->permissionService
             ->filterRestrictedEntityRelations($query, 'activities', 'entity_id', 'entity_type')
-            ->orderBy('created_at', 'desc')->with(['entity', 'user.avatar'])->skip($count * $page)->take($count)->get();
+            ->orderBy('created_at', 'desc')->with(['entity', 'user.avatar'])->skip($count * ($page - 1))->take($count)->get();
 
         return $this->filterSimilar($activity);
     }
diff --git a/app/Auth/UserRepo.php b/app/Auth/UserRepo.php
index 31b91108d..b2ff0bc58 100644
--- a/app/Auth/UserRepo.php
+++ b/app/Auth/UserRepo.php
@@ -256,7 +256,7 @@ class UserRepo
      */
     public function getAllRoles()
     {
-        return $this->role->all();
+        return $this->role->newQuery()->orderBy('name', 'asc')->get();
     }
 
     /**
diff --git a/app/Entities/Bookshelf.php b/app/Entities/Bookshelf.php
index c37e36b59..6753c2882 100644
--- a/app/Entities/Bookshelf.php
+++ b/app/Entities/Bookshelf.php
@@ -50,6 +50,7 @@ class Bookshelf extends Entity
      */
     public function getBookCover($width = 440, $height = 250)
     {
+        // TODO - Make generic, focused on books right now, Perhaps set-up a better image
         $default = baseUrl('/book_default_cover.png');
         if (!$this->image_id) {
             return $default;
@@ -64,7 +65,7 @@ class Bookshelf extends Entity
     }
 
     /**
-     * Get the cover image of the book
+     * Get the cover image of the shelf
      * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
      */
     public function cover()
diff --git a/app/Http/Controllers/BookController.php b/app/Http/Controllers/BookController.php
index 95cd8bdeb..65f97b8c9 100644
--- a/app/Http/Controllers/BookController.php
+++ b/app/Http/Controllers/BookController.php
@@ -108,7 +108,7 @@ class BookController extends Controller
             'book' => $book,
             'current' => $book,
             'bookChildren' => $bookChildren,
-            'activity' => Activity::entityActivity($book, 20, 0)
+            'activity' => Activity::entityActivity($book, 20, 1)
         ]);
     }
 
diff --git a/app/Http/Controllers/BookshelfController.php b/app/Http/Controllers/BookshelfController.php
index 8db362f3c..dd305be97 100644
--- a/app/Http/Controllers/BookshelfController.php
+++ b/app/Http/Controllers/BookshelfController.php
@@ -36,11 +36,22 @@ class BookshelfController extends Controller
      */
     public function index()
     {
-        $shelves = $this->entityRepo->getAllPaginated('bookshelf', 18);
+
+        $view = setting()->getUser($this->currentUser, 'bookshelves_view_type', config('app.views.bookshelves', 'grid'));
+
+        $sort = setting()->getUser($this->currentUser, 'bookshelves_sort', 'name');
+        $order = setting()->getUser($this->currentUser, 'bookshelves_sort_order', 'asc');
+        $sortOptions = [
+            'name' => trans('common.sort_name'),
+            'created_at' => trans('common.sort_created_at'),
+            'updated_at' => trans('common.sort_updated_at'),
+        ];
+
+        $shelves = $this->entityRepo->getAllPaginated('bookshelf', 18, $sort, $order);
         $recents = $this->signedIn ? $this->entityRepo->getRecentlyViewed('bookshelf', 4, 0) : false;
         $popular = $this->entityRepo->getPopular('bookshelf', 4, 0);
         $new = $this->entityRepo->getRecentlyCreated('bookshelf', 4, 0);
-        $view = setting()->getUser($this->currentUser, 'bookshelves_view_type', config('app.views.bookshelves', 'grid'));
+
 
         $this->setPageTitle(trans('entities.shelves'));
         return view('shelves.index', [
@@ -48,7 +59,10 @@ class BookshelfController extends Controller
             'recents' => $recents,
             'popular' => $popular,
             'new' => $new,
-            'view' => $view
+            'view' => $view,
+            'sort' => $sort,
+            'order' => $order,
+            'sortOptions' => $sortOptions,
         ]);
     }
 
@@ -103,7 +117,7 @@ class BookshelfController extends Controller
         return view('shelves.show', [
             'shelf' => $bookshelf,
             'books' => $books,
-            'activity' => Activity::entityActivity($bookshelf, 20, 0)
+            'activity' => Activity::entityActivity($bookshelf, 20, 1)
         ]);
     }
 
@@ -190,31 +204,32 @@ class BookshelfController extends Controller
     }
 
     /**
-     * Show the Restrictions view.
-     * @param $slug
+     * Show the permissions view.
+     * @param string $slug
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      * @throws \BookStack\Exceptions\NotFoundException
      */
-    public function showRestrict(string $slug)
+    public function showPermissions(string $slug)
     {
         $bookshelf = $this->entityRepo->getBySlug('bookshelf', $slug);
         $this->checkOwnablePermission('restrictions-manage', $bookshelf);
 
         $roles = $this->userRepo->getRestrictableRoles();
-        return view('shelves.restrictions', [
+        return view('shelves.permissions', [
             'shelf' => $bookshelf,
             'roles' => $roles
         ]);
     }
 
     /**
-     * Set the restrictions for this bookshelf.
-     * @param $slug
+     * Set the permissions for this bookshelf.
+     * @param string $slug
      * @param Request $request
      * @return \Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
      * @throws \BookStack\Exceptions\NotFoundException
+     * @throws \Throwable
      */
-    public function restrict(string $slug, Request $request)
+    public function permissions(string $slug, Request $request)
     {
         $bookshelf = $this->entityRepo->getBySlug('bookshelf', $slug);
         $this->checkOwnablePermission('restrictions-manage', $bookshelf);
diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
index 875cca60a..7ebf26209 100644
--- a/app/Http/Controllers/PageController.php
+++ b/app/Http/Controllers/PageController.php
@@ -534,20 +534,6 @@ class PageController extends Controller
         return $this->downloadResponse($pageText, $pageSlug . '.txt');
     }
 
-    /**
-     * Show a listing of recently created pages
-     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
-     */
-    public function showRecentlyCreated()
-    {
-        // TODO - Still exist?
-        $pages = $this->pageRepo->getRecentlyCreatedPaginated('page', 20)->setPath(baseUrl('/pages/recently-created'));
-        return view('pages.detailed-listing', [
-            'title' => trans('entities.recently_created_pages'),
-            'pages' => $pages
-        ]);
-    }
-
     /**
      * Show a listing of recently created pages
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index fc0431e94..327a54995 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -289,15 +289,20 @@ class UserController extends Controller
     }
 
     /**
-     * Change the stored sort type for the books view.
-     * @param $id
+     * Change the stored sort type for a particular view.
+     * @param string $id
+     * @param string $type
      * @param Request $request
      * @return \Illuminate\Http\RedirectResponse
      */
-    public function changeBooksSort($id, Request $request)
+    public function changeSort(string $id, string $type, Request $request)
     {
         // TODO - Test this endpoint
-        return $this->changeListSort($id, $request, 'books');
+        $validSortTypes = ['books', 'bookshelves'];
+        if (!in_array($type, $validSortTypes)) {
+            return redirect()->back(500);
+        }
+        return $this->changeListSort($id, $request, $type);
     }
 
     /**
diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index 1baec7a92..a52ac71a9 100644
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -86,27 +86,27 @@
 @mixin spacing($prop, $propLetter) {
   @each $sizeLetter, $size in $spacing {
     .#{$propLetter}-#{$sizeLetter} {
-      #{$prop}: $size;
+      #{$prop}: $size !important;
     }
     .#{$propLetter}x-#{$sizeLetter} {
-      #{$prop}-left: $size;
-      #{$prop}-right: $size;
+      #{$prop}-left: $size !important;
+      #{$prop}-right: $size !important;
     }
     .#{$propLetter}y-#{$sizeLetter} {
-      #{$prop}-top: $size;
-      #{$prop}-bottom: $size;
+      #{$prop}-top: $size !important;
+      #{$prop}-bottom: $size !important;
     }
     .#{$propLetter}t-#{$sizeLetter} {
-      #{$prop}-top: $size;
+      #{$prop}-top: $size !important;
     }
     .#{$propLetter}r-#{$sizeLetter} {
-      #{$prop}-right: $size;
+      #{$prop}-right: $size !important;
     }
     .#{$propLetter}b-#{$sizeLetter} {
-      #{$prop}-bottom: $size;
+      #{$prop}-bottom: $size !important;
     }
     .#{$propLetter}l-#{$sizeLetter} {
-      #{$prop}-left: $size;
+      #{$prop}-left: $size !important;
     }
   }
 
diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index 49615fc9d..5e973a947 100644
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -28,7 +28,7 @@ $button-border-radius: 2px;
 
 .button-base {
   text-decoration: none;
-  font-size: $fs-m;
+  font-size: 0.85rem;
   line-height: 1.4em;
   padding: $-xs*1.3 $-m;
   margin-top: $-xs;
@@ -67,6 +67,11 @@ $button-border-radius: 2px;
   margin-left: $-s;
 }
 
+.button.small {
+  font-size: 0.75rem;
+  padding: $-xs*1.2 $-s;
+}
+
 .button.outline {
   background-color: transparent;
   color: #888;
@@ -115,6 +120,7 @@ $button-border-radius: 2px;
   margin: 0;
   border: none;
   user-select: none;
+  font-size: 0.75rem;
   &:focus, &:active {
     outline: 0;
   }
@@ -124,6 +130,9 @@ $button-border-radius: 2px;
   &.neg {
     color: $negative;
   }
+  &.muted {
+    color: #666;
+  }
 }
 
 .button-group {
diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss
index d89b26463..d2ee13837 100644
--- a/resources/assets/sass/_colors.scss
+++ b/resources/assets/sass/_colors.scss
@@ -101,4 +101,7 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
 
 .bg-book {
   background-color: $color-book;
+}
+.bg-shelf {
+  background-color: $color-bookshelf;
 }
\ No newline at end of file
diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 2c612f533..6634ac81b 100644
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -98,7 +98,7 @@ label {
   line-height: 1.4em;
   font-size: 0.94em;
   font-weight: 400;
-  color: #999;
+  color: #666;
   padding-bottom: 2px;
   margin-bottom: 0.2em;
   &.inline {
@@ -149,9 +149,10 @@ input[type=date] {
     height: 16px;
     border-radius: 2px;
     display: inline-block;
-    border: 2px solid #999;
+    border: 2px solid currentColor;
+    opacity: 0.6;
     overflow: hidden;
-    fill: #888;
+    fill: currentColor;
     .svg-icon {
       width: 100%;
       height: 100%;
@@ -172,8 +173,12 @@ input[type=date] {
   }
   .custom-checkbox:hover {
     background-color: rgba(0, 0, 0, 0.05);
+    opacity: 0.8;
   }
 }
+.toggle-switch-list .toggle-switch {
+  margin: $-xs 0;
+}
 
 .form-group {
   margin-bottom: $-s;
@@ -193,6 +198,14 @@ input[type=date] {
 .setting-list-label + p.small {
   margin-bottom: 0;
 }
+.setting-list-label + .grid {
+  margin-top: $-m;
+}
+.setting-list .grid {
+  input[type=text], input[type=email], input[type=password], select {
+    width: 100%;
+  }
+}
 
 .simple-code-input {
   background-color: #F8F8F8;
diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 1bcfefe64..b3d4895a3 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -50,6 +50,16 @@ body.flexbox {
   flex: 1;
 }
 
+.dual-column-content {
+  columns: 2;
+}
+
+@include smaller-than($m) {
+  .dual-column-content {
+    columns: 1;
+  }
+}
+
 .content-wrap.card {
   padding: $-l $-xxl;
   margin-left: auto;
@@ -65,6 +75,12 @@ body.flexbox {
   }
 }
 
+@include smaller-than($m) {
+  .content-wrap.card {
+    padding: $-m $-l;
+  }
+}
+
 .tri-layout-container {
   display: grid;
   grid-template-columns: 1fr minmax(auto, 940px) 1fr;
@@ -271,9 +287,13 @@ div[class^="col-"] img {
   .grid.third {
     grid-template-columns: 1fr 1fr;
   }
-  .grid.left-focus, .grid.right-focus {
+  .grid.half, .grid.left-focus, .grid.right-focus {
     grid-template-columns: 1fr;
   }
+  .grid.large-gap {
+    grid-column-gap: $-m;
+    grid-row-gap: $-m;
+  }
   .grid.right-focus.reverse-collapse > *:nth-child(2) {
     order: 0;
   }
diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 683c8077a..972eafddd 100644
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -149,8 +149,8 @@ em, i, .italic {
 }
 
 small, p.small, span.small, .text-small {
-  font-size: 0.8em;
-  color: lighten($text-dark, 20%);
+  font-size: 0.85em;
+  color: lighten($text-dark, 10%);
   small, p.small, span.small, .text-small {
     font-size: 1em;
   }
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index c5dba1dd5..eb0d8df07 100755
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -91,9 +91,14 @@ return [
     'user_profile' => 'User Profile',
     'users_add_new' => 'Add New User',
     'users_search' => 'Search Users',
+    'users_details' => 'User Details',
+    'users_details_desc' => 'Set a display name and an email address for this user. The email address will be used for logging into the application.',
     'users_role' => 'User Roles',
+    'users_role_desc' => 'Select which roles this user will be assigned to. If a user is assigned to multiple roles the permissions from those roles will stack and they will receive all abilities of the assigned roles.',
+    'users_password' => 'User Password',
+    'users_password_desc' => 'Set a password used to log-in to the application. This must be at least 5 characters long.',
     'users_external_auth_id' => 'External Authentication ID',
-    'users_password_warning' => 'Only fill the below if you would like to change your password:',
+    'users_password_warning' => 'Only fill the below if you would like to change your password.',
     'users_system_public' => 'This user represents any guest users that visit your instance. It cannot be used to log in but is assigned automatically.',
     'users_delete' => 'Delete User',
     'users_delete_named' => 'Delete user :userName',
diff --git a/resources/views/books/edit.blade.php b/resources/views/books/edit.blade.php
index 351f88845..e1162d4b4 100644
--- a/resources/views/books/edit.blade.php
+++ b/resources/views/books/edit.blade.php
@@ -7,7 +7,7 @@
         <div class="my-l">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $book,
-                $book->getUrl() => trans('entities.books_edit')
+                $book->getUrl('/edit') => trans('entities.books_edit')
             ]])
         </div>
 
diff --git a/resources/views/books/list.blade.php b/resources/views/books/list.blade.php
index 5e077727b..6e0cc1fd6 100644
--- a/resources/views/books/list.blade.php
+++ b/resources/views/books/list.blade.php
@@ -1,10 +1,10 @@
 
 <div class="content-wrap card">
-    <div class="grid halves v-center">
+    <div class="grid half v-center">
         <h1 class="list-heading">{{ trans('entities.books') }}</h1>
         <div class="text-right">
 
-            @include('partials.sort', ['options' => $sortOptions, 'order' => $order, 'sort' => $sort])
+            @include('partials.sort', ['options' => $sortOptions, 'order' => $order, 'sort' => $sort, 'type' => 'books'])
 
         </div>
     </div>
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 75b8a9e41..ba07ade0a 100644
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -143,7 +143,7 @@
     @if(count($activity) > 0)
         <div class="mb-xl">
             <h5>{{ trans('entities.recent_activity') }}</h5>
-            @include('partials/activity-list', ['activity' => $activity])
+            @include('partials.activity-list', ['activity' => $activity])
         </div>
     @endif
 @stop
diff --git a/resources/views/components/custom-checkbox.blade.php b/resources/views/components/custom-checkbox.blade.php
new file mode 100644
index 000000000..57ab1342c
--- /dev/null
+++ b/resources/views/components/custom-checkbox.blade.php
@@ -0,0 +1,11 @@
+{{--
+$name
+$value
+$checked
+$label
+--}}
+<label class="toggle-switch @if($errors->has($name)) neg @endif">
+    <input type="checkbox" name="{{$name}}" value="{{ $value }}" @if($checked) checked="checked" @endif>
+    <span class="custom-checkbox text-primary">@icon('check')</span>
+    <span class="label">{{$label}}</span>
+</label>
\ No newline at end of file
diff --git a/resources/views/components/image-picker.blade.php b/resources/views/components/image-picker.blade.php
index 034b65cc5..630006d82 100644
--- a/resources/views/components/image-picker.blade.php
+++ b/resources/views/components/image-picker.blade.php
@@ -1,17 +1,20 @@
 <div class="image-picker" image-picker="{{$name}}" data-default-image="{{ $defaultImage }}" data-resize-height="{{ $resizeHeight }}" data-resize-width="{{ $resizeWidth }}" data-current-id="{{ $currentId or '' }}" data-resize-crop="{{ $resizeCrop or '' }}">
 
-    <div>
-        <img @if($currentImage && $currentImage !== 'none') src="{{$currentImage}}" @else src="{{$defaultImage}}" @endif  class="{{$imageClass}} @if($currentImage=== 'none') none @endif" alt="{{ trans('components.image_preview') }}">
+    <div class="grid half">
+        <div class="text-center">
+            <img @if($currentImage && $currentImage !== 'none') src="{{$currentImage}}" @else src="{{$defaultImage}}" @endif  class="{{$imageClass}} @if($currentImage=== 'none') none @endif" alt="{{ trans('components.image_preview') }}">
+        </div>
+        <div class="text-center">
+            <button class="button outline small" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button>
+            <br>
+            <button class="text-button muted" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
+
+            @if ($showRemove)
+                <span class="sep">|</span>
+                <button class="text-button muted" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
+            @endif
+        </div>
     </div>
 
-    <button class="button" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button>
-    <br>
-    <button class="text-button" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
-
-    @if ($showRemove)
-        <span class="sep">|</span>
-        <button class="text-button neg" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
-    @endif
-
     <input type="hidden" name="{{$name}}" id="{{$name}}" value="{{ isset($currentId) && ($currentId !== 0 && $currentId !== false) ? $currentId : $currentImage}}">
 </div>
\ No newline at end of file
diff --git a/resources/views/components/toggle-switch.blade.php b/resources/views/components/toggle-switch.blade.php
index c6d78f1b9..366e56ee8 100644
--- a/resources/views/components/toggle-switch.blade.php
+++ b/resources/views/components/toggle-switch.blade.php
@@ -1,6 +1,6 @@
 <label toggle-switch="{{$name}}" class="toggle-switch">
     <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
     <input type="checkbox" @if($value) checked="checked" @endif>
-    <span class="custom-checkbox ">@icon('check')</span>
+    <span class="custom-checkbox text-primary">@icon('check')</span>
     <span class="label">{{ $label ?? '' }}</span> {{-- TODO - remove default operataor backup --}}
 </label>
\ No newline at end of file
diff --git a/resources/views/form/checkbox.blade.php b/resources/views/form/checkbox.blade.php
index 255896906..255b591aa 100644
--- a/resources/views/form/checkbox.blade.php
+++ b/resources/views/form/checkbox.blade.php
@@ -1,11 +1,15 @@
-
-<label>
-    <input value="true" id="{{$name}}" type="checkbox" name="{{$name}}"
-           @if($errors->has($name)) class="neg" @endif
-           @if(old($name) || (!old() && isset($model) && $model->$name)) checked="checked" @endif
-    >
-    {{ $label }}
-</label>
+{{--
+$name
+$label
+$errors?
+$model?
+--}}
+@include('components.custom-checkbox', [
+    'name' => $name,
+    'label' => $label,
+    'value' => 'true',
+    'checked' => old($name) || (!old() && isset($model) && $model->$name)
+])
 
 @if($errors->has($name))
     <div class="text-neg text-small">{{ $errors->first($name) }}</div>
diff --git a/resources/views/form/entity-permissions.blade.php b/resources/views/form/entity-permissions.blade.php
index 92af4d592..bb7d992f7 100644
--- a/resources/views/form/entity-permissions.blade.php
+++ b/resources/views/form/entity-permissions.blade.php
@@ -2,15 +2,18 @@
     {!! csrf_field() !!}
     <input type="hidden" name="_method" value="PUT">
 
-    <p>{{ trans('entities.permissions_intro') }}</p>
+    <p class="mb-none">{{ trans('entities.permissions_intro') }}</p>
 
     <div class="form-group">
-        @include('form/checkbox', ['name' => 'restricted', 'label' => trans('entities.permissions_enable')])
+        @include('form.checkbox', [
+            'name' => 'restricted',
+            'label' => trans('entities.permissions_enable'),
+        ])
     </div>
 
     {{--TODO - Add global and role "Select All" options--}}
 
-    <table class="table">
+    <table class="table toggle-switch-list">
         <tr>
             <th>{{ trans('common.role') }}</th>
             <th @if($model->isA('page')) colspan="3" @else colspan="4" @endif>{{ trans('common.actions') }}</th>
@@ -18,12 +21,12 @@
         @foreach($roles as $role)
             <tr>
                 <td>{{ $role->display_name }}</td>
-                <td>@include('form/restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.view'), 'action' => 'view'])</td>
+                <td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.view'), 'action' => 'view'])</td>
                 @if(!$model->isA('page'))
-                    <td>@include('form/restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.create'), 'action' => 'create'])</td>
+                    <td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.create'), 'action' => 'create'])</td>
                 @endif
-                <td>@include('form/restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.update'), 'action' => 'update'])</td>
-                <td>@include('form/restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.delete'), 'action' => 'delete'])</td>
+                <td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.update'), 'action' => 'update'])</td>
+                <td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.delete'), 'action' => 'delete'])</td>
             </tr>
         @endforeach
     </table>
diff --git a/resources/views/form/restriction-checkbox.blade.php b/resources/views/form/restriction-checkbox.blade.php
index aab5a0729..65a94239e 100644
--- a/resources/views/form/restriction-checkbox.blade.php
+++ b/resources/views/form/restriction-checkbox.blade.php
@@ -1,6 +1,13 @@
-{{--TODO - Make custom--}}
-<label>
-    <input value="true" id="{{$name}}[{{$role->id}}][{{$action}}]" type="checkbox" name="{{$name}}[{{$role->id}}][{{$action}}]"
-           @if(isset($model) && $model->hasRestriction($role->id, $action)) checked="checked" @endif>
-    {{ $label }}
-</label>
\ No newline at end of file
+{{--
+$name
+$label
+$role
+$action
+$model?
+--}}
+@include('components.custom-checkbox', [
+    'name' => $name . '[' . $role->id . '][' . $action . ']',
+    'label' => $label,
+    'value' => 'true',
+    'checked' => isset($model) && $model->hasRestriction($role->id, $action)
+])
\ No newline at end of file
diff --git a/resources/views/form/role-checkboxes.blade.php b/resources/views/form/role-checkboxes.blade.php
index df868ee98..ab6265264 100644
--- a/resources/views/form/role-checkboxes.blade.php
+++ b/resources/views/form/role-checkboxes.blade.php
@@ -1,13 +1,16 @@
 
-@foreach($roles as $role)
-    <label>
-        <input value="{{ $role->id }}" id="{{$name}}-{{$role->name}}" type="checkbox" name="{{$name}}[{{$role->name}}]"
-               @if($errors->has($name)) class="neg" @endif
-               @if(old($name . '.' . $role->name) || (!old('name') && isset($model) && $model->hasRole($role->name))) checked="checked" @endif
-        >
-        {{ $role->display_name }}
-    </label>
-@endforeach
+<div class="toggle-switch-list dual-column-content">
+    @foreach($roles as $role)
+        <div>
+            @include('components.custom-checkbox', [
+                'name' => $name . '[' . $role->name . ']',
+                'label' => $role->display_name,
+                'value' => $role->id,
+                'checked' => old($name . '.' . $role->name) || (!old('name') && isset($model) && $model->hasRole($role->name))
+            ])
+        </div>
+    @endforeach
+</div>
 
 @if($errors->has($name))
     <div class="text-neg text-small">{{ $errors->first($name) }}</div>
diff --git a/resources/views/pages/detailed-listing.blade.php b/resources/views/pages/detailed-listing.blade.php
index b4991d79d..eb2fab94c 100644
--- a/resources/views/pages/detailed-listing.blade.php
+++ b/resources/views/pages/detailed-listing.blade.php
@@ -1,15 +1,17 @@
 @extends('simple-layout')
 
 @section('body')
-    <div class="container small">
-        <p>&nbsp;</p>
-        <div class="card">
-            <h3>{{ $title }}</h3>
-            @include('partials/entity-list', ['entities' => $pages, 'style' => 'detailed'])
-            <div class="body text-center">
+    <div class="container small pt-xl">
+        <div class="card content-wrap">
+            <h1 class="list-heading">{{ $title }}</h1>
+
+            <div class="book-contents">
+                @include('partials.entity-list', ['entities' => $pages, 'style' => 'detailed'])
+            </div>
+
+            <div class="text-center">
                 {!! $pages->links() !!}
             </div>
         </div>
-
     </div>
 @stop
\ No newline at end of file
diff --git a/resources/views/partials/sort.blade.php b/resources/views/partials/sort.blade.php
index 03eab8487..d7ed4d92e 100644
--- a/resources/views/partials/sort.blade.php
+++ b/resources/views/partials/sort.blade.php
@@ -4,7 +4,7 @@
 ?>
 <div class="list-sort-container" list-sort-control>
     <div class="list-sort-label">{{ trans('common.sort') }}</div>
-    <form action="{{ baseUrl("/settings/users/{$currentUser->id}/change-books-sort") }}" method="post">
+    <form action="{{ baseUrl("/settings/users/{$currentUser->id}/change-sort/{$type}") }}" method="post">
 
         {!! csrf_field() !!}
         {!! method_field('PATCH') !!}
diff --git a/resources/views/search/all.blade.php b/resources/views/search/all.blade.php
index a952079d5..6a6c9d198 100644
--- a/resources/views/search/all.blade.php
+++ b/resources/views/search/all.blade.php
@@ -1,207 +1,207 @@
-@extends('sidebar-layout')
-
-@section('toolbar')
-    <div class="col-sm-12 faded">
-        <div class="breadcrumbs">
-            <a href="{{ baseUrl("/search?term=" . urlencode($searchTerm)) }}" class="text-button">@icon('search'){{ trans('entities.search_for_term', ['term' => $searchTerm]) }}</a>
-        </div>
-    </div>
-@stop
-
-@section('container-attrs')
-    id="search-system"
-@stop
-
-@section('sidebar')
-    <div class="card">
-        <h3>{{ trans('entities.search_filters') }}</h3>
-
-        <div class="body">
-            <form v-on:submit="updateSearch" v-cloak class="v-cloak anim fadeIn">
-                <h6 class="text-muted">{{ trans('entities.search_content_type') }}</h6>
-                <div class="form-group">
-                    <label class="inline checkbox text-page"><input type="checkbox" v-on:change="typeChange" v-model="search.type.page" value="page">{{ trans('entities.page') }}</label>
-                    <label class="inline checkbox text-chapter"><input type="checkbox" v-on:change="typeChange" v-model="search.type.chapter" value="chapter">{{ trans('entities.chapter') }}</label>
-                    <br>
-                    <label class="inline checkbox text-book"><input type="checkbox" v-on:change="typeChange" v-model="search.type.book" value="book">{{ trans('entities.book') }}</label>
-                    <label class="inline checkbox text-bookshelf"><input type="checkbox" v-on:change="typeChange" v-model="search.type.bookshelf" value="bookshelf">{{ trans('entities.shelf') }}</label>
-                </div>
-
-                <h6 class="text-muted">{{ trans('entities.search_exact_matches') }}</h6>
-                <table cellpadding="0" cellspacing="0" border="0" class="no-style">
-                    <tr v-for="(term, i) in search.exactTerms">
-                        <td style="padding: 0 12px 6px 0;">
-                            <input class="exact-input outline" v-on:input="exactChange" type="text" v-model="search.exactTerms[i]"></td>
-                        <td>
-                            <button type="button" class="text-neg text-button" v-on:click="removeExact(i)">
-                                @icon('close')
-                            </button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td colspan="2">
-                            <button type="button" class="text-button" v-on:click="addExact">
-                                @icon('add-circle'){{ trans('common.add') }}
-                            </button>
-                        </td>
-                    </tr>
-                </table>
-
-                <h6 class="text-muted">{{ trans('entities.search_tags') }}</h6>
-                <table cellpadding="0" cellspacing="0" border="0" class="no-style">
-                    <tr v-for="(term, i) in search.tagTerms">
-                        <td style="padding: 0 12px 6px 0;">
-                            <input class="tag-input outline" v-on:input="tagChange" type="text" v-model="search.tagTerms[i]"></td>
-                        <td>
-                            <button type="button" class="text-neg text-button" v-on:click="removeTag(i)">
-                                @icon('close')
-                            </button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td colspan="2">
-                            <button type="button" class="text-button" v-on:click="addTag">
-                                @icon('add-circle'){{ trans('common.add') }}
-                            </button>
-                        </td>
-                    </tr>
-                </table>
-
-               @if(signedInUser())
-                    <h6 class="text-muted">{{ trans('entities.search_options') }}</h6>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('viewed_by_me')"
-                               v-model="search.option.viewed_by_me" value="page">
-                        {{ trans('entities.search_viewed_by_me') }}
-                    </label>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('not_viewed_by_me')"
-                               v-model="search.option.not_viewed_by_me" value="page">
-                        {{ trans('entities.search_not_viewed_by_me') }}
-                    </label>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('is_restricted')"
-                               v-model="search.option.is_restricted" value="page">
-                        {{ trans('entities.search_permissions_set') }}
-                    </label>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('created_by:me')"
-                               v-model="search.option['created_by:me']" value="page">
-                        {{ trans('entities.search_created_by_me') }}
-                    </label>
-                    <label class="checkbox">
-                        <input type="checkbox" v-on:change="optionChange('updated_by:me')"
-                               v-model="search.option['updated_by:me']" value="page">
-                        {{ trans('entities.search_updated_by_me') }}
-                    </label>
-                @endif
-
-                <h6 class="text-muted">{{ trans('entities.search_date_options') }}</h6>
-                <table cellpadding="0" cellspacing="0" border="0" class="no-style form-table">
-                    <tr>
-                        <td width="200">{{ trans('entities.search_updated_after') }}</td>
-                        <td width="80">
-                            <button type="button" class="text-button" v-if="!search.dates.updated_after"
-                                    v-on:click="enableDate('updated_after')">{{ trans('entities.search_set_date') }}</button>
-
-                        </td>
-                    </tr>
-                    <tr v-if="search.dates.updated_after">
-                        <td>
-                            <input v-if="search.dates.updated_after" class="tag-input"
-                                   v-on:input="dateChange('updated_after')" type="date" v-model="search.dates.updated_after"
-                                   pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-                        </td>
-                        <td>
-                            <button v-if="search.dates.updated_after" type="button" class="text-neg text-button"
-                                    v-on:click="dateRemove('updated_after')">
-                                @icon('close')
-                            </button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ trans('entities.search_updated_before') }}</td>
-                        <td>
-                            <button type="button" class="text-button" v-if="!search.dates.updated_before"
-                                    v-on:click="enableDate('updated_before')">{{ trans('entities.search_set_date') }}</button>
-
-                        </td>
-                    </tr>
-                    <tr v-if="search.dates.updated_before">
-                        <td>
-                            <input v-if="search.dates.updated_before" class="tag-input"
-                                   v-on:input="dateChange('updated_before')" type="date" v-model="search.dates.updated_before"
-                                   pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-                        </td>
-                        <td>
-                            <button v-if="search.dates.updated_before" type="button" class="text-neg text-button"
-                                    v-on:click="dateRemove('updated_before')">
-                                @icon('close')
-                            </button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ trans('entities.search_created_after') }}</td>
-                        <td>
-                            <button type="button" class="text-button" v-if="!search.dates.created_after"
-                                    v-on:click="enableDate('created_after')">{{ trans('entities.search_set_date') }}</button>
-
-                        </td>
-                    </tr>
-                    <tr v-if="search.dates.created_after">
-                        <td>
-                            <input v-if="search.dates.created_after" class="tag-input"
-                                   v-on:input="dateChange('created_after')" type="date" v-model="search.dates.created_after"
-                                   pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-                        </td>
-                        <td>
-                            <button v-if="search.dates.created_after" type="button" class="text-neg text-button"
-                                    v-on:click="dateRemove('created_after')">
-                                @icon('close')
-                            </button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ trans('entities.search_created_before') }}</td>
-                        <td>
-                            <button type="button" class="text-button" v-if="!search.dates.created_before"
-                                    v-on:click="enableDate('created_before')">{{ trans('entities.search_set_date') }}</button>
-
-                        </td>
-                    </tr>
-                    <tr v-if="search.dates.created_before">
-                        <td>
-                            <input v-if="search.dates.created_before" class="tag-input"
-                                   v-on:input="dateChange('created_before')" type="date" v-model="search.dates.created_before"
-                                   pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-                        </td>
-                        <td>
-                            <button v-if="search.dates.created_before" type="button" class="text-neg text-button"
-                                    v-on:click="dateRemove('created_before')">
-                                @icon('close')
-                            </button>
-                        </td>
-                    </tr>
-                </table>
-
-
-                <button type="submit" class="button primary">{{ trans('entities.search_update') }}</button>
-            </form>
-        </div>
-
-    </div>
-@stop
+@extends('simple-layout')
 
 @section('body')
+    <input type="hidden" name="searchTerm" value="{{$searchTerm}}">
 
-    <div class="container small" v-pre>
-        <input type="hidden" name="searchTerm" value="{{$searchTerm}}">
+    <div class="container" id="search-system">
+
+        <div class="my-s">
+            &nbsp;
+        </div>
+
+        <div class="grid right-focus reverse-collapse large-gap">
+            <div>
+                <div>
+                    <h5>{{ trans('entities.search_filters') }}</h5>
+
+                    <form v-on:submit="updateSearch" v-cloak class="v-cloak anim fadeIn">
+                        <h6 class="text-muted">{{ trans('entities.search_content_type') }}</h6>
+                        <div class="form-group">
+                            <label class="inline checkbox text-page"><input type="checkbox" v-on:change="typeChange" v-model="search.type.page" value="page">{{ trans('entities.page') }}</label>
+                            <label class="inline checkbox text-chapter"><input type="checkbox" v-on:change="typeChange" v-model="search.type.chapter" value="chapter">{{ trans('entities.chapter') }}</label>
+                            <br>
+                            <label class="inline checkbox text-book"><input type="checkbox" v-on:change="typeChange" v-model="search.type.book" value="book">{{ trans('entities.book') }}</label>
+                            <label class="inline checkbox text-bookshelf"><input type="checkbox" v-on:change="typeChange" v-model="search.type.bookshelf" value="bookshelf">{{ trans('entities.shelf') }}</label>
+                        </div>
+
+                        <h6 class="text-muted">{{ trans('entities.search_exact_matches') }}</h6>
+                        <table cellpadding="0" cellspacing="0" border="0" class="no-style">
+                            <tr v-for="(term, i) in search.exactTerms">
+                                <td style="padding: 0 12px 6px 0;">
+                                    <input class="exact-input outline" v-on:input="exactChange" type="text" v-model="search.exactTerms[i]"></td>
+                                <td>
+                                    <button type="button" class="text-neg text-button" v-on:click="removeExact(i)">
+                                        @icon('close')
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td colspan="2">
+                                    <button type="button" class="text-button" v-on:click="addExact">
+                                        @icon('add-circle'){{ trans('common.add') }}
+                                    </button>
+                                </td>
+                            </tr>
+                        </table>
+
+                        <h6 class="text-muted">{{ trans('entities.search_tags') }}</h6>
+                        <table cellpadding="0" cellspacing="0" border="0" class="no-style">
+                            <tr v-for="(term, i) in search.tagTerms">
+                                <td style="padding: 0 12px 6px 0;">
+                                    <input class="tag-input outline" v-on:input="tagChange" type="text" v-model="search.tagTerms[i]"></td>
+                                <td>
+                                    <button type="button" class="text-neg text-button" v-on:click="removeTag(i)">
+                                        @icon('close')
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td colspan="2">
+                                    <button type="button" class="text-button" v-on:click="addTag">
+                                        @icon('add-circle'){{ trans('common.add') }}
+                                    </button>
+                                </td>
+                            </tr>
+                        </table>
+
+                        @if(signedInUser())
+                            <h6 class="text-muted">{{ trans('entities.search_options') }}</h6>
+                            <label class="checkbox">
+                                <input type="checkbox" v-on:change="optionChange('viewed_by_me')"
+                                       v-model="search.option.viewed_by_me" value="page">
+                                {{ trans('entities.search_viewed_by_me') }}
+                            </label>
+                            <label class="checkbox">
+                                <input type="checkbox" v-on:change="optionChange('not_viewed_by_me')"
+                                       v-model="search.option.not_viewed_by_me" value="page">
+                                {{ trans('entities.search_not_viewed_by_me') }}
+                            </label>
+                            <label class="checkbox">
+                                <input type="checkbox" v-on:change="optionChange('is_restricted')"
+                                       v-model="search.option.is_restricted" value="page">
+                                {{ trans('entities.search_permissions_set') }}
+                            </label>
+                            <label class="checkbox">
+                                <input type="checkbox" v-on:change="optionChange('created_by:me')"
+                                       v-model="search.option['created_by:me']" value="page">
+                                {{ trans('entities.search_created_by_me') }}
+                            </label>
+                            <label class="checkbox">
+                                <input type="checkbox" v-on:change="optionChange('updated_by:me')"
+                                       v-model="search.option['updated_by:me']" value="page">
+                                {{ trans('entities.search_updated_by_me') }}
+                            </label>
+                        @endif
+
+                        <h6 class="text-muted">{{ trans('entities.search_date_options') }}</h6>
+                        <table cellpadding="0" cellspacing="0" border="0" class="no-style form-table">
+                            <tr>
+                                <td width="200">{{ trans('entities.search_updated_after') }}</td>
+                                <td width="80">
+                                    <button type="button" class="text-button" v-if="!search.dates.updated_after"
+                                            v-on:click="enableDate('updated_after')">{{ trans('entities.search_set_date') }}</button>
+
+                                </td>
+                            </tr>
+                            <tr v-if="search.dates.updated_after">
+                                <td>
+                                    <input v-if="search.dates.updated_after" class="tag-input"
+                                           v-on:input="dateChange('updated_after')" type="date" v-model="search.dates.updated_after"
+                                           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+                                </td>
+                                <td>
+                                    <button v-if="search.dates.updated_after" type="button" class="text-neg text-button"
+                                            v-on:click="dateRemove('updated_after')">
+                                        @icon('close')
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>{{ trans('entities.search_updated_before') }}</td>
+                                <td>
+                                    <button type="button" class="text-button" v-if="!search.dates.updated_before"
+                                            v-on:click="enableDate('updated_before')">{{ trans('entities.search_set_date') }}</button>
+
+                                </td>
+                            </tr>
+                            <tr v-if="search.dates.updated_before">
+                                <td>
+                                    <input v-if="search.dates.updated_before" class="tag-input"
+                                           v-on:input="dateChange('updated_before')" type="date" v-model="search.dates.updated_before"
+                                           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+                                </td>
+                                <td>
+                                    <button v-if="search.dates.updated_before" type="button" class="text-neg text-button"
+                                            v-on:click="dateRemove('updated_before')">
+                                        @icon('close')
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>{{ trans('entities.search_created_after') }}</td>
+                                <td>
+                                    <button type="button" class="text-button" v-if="!search.dates.created_after"
+                                            v-on:click="enableDate('created_after')">{{ trans('entities.search_set_date') }}</button>
+
+                                </td>
+                            </tr>
+                            <tr v-if="search.dates.created_after">
+                                <td>
+                                    <input v-if="search.dates.created_after" class="tag-input"
+                                           v-on:input="dateChange('created_after')" type="date" v-model="search.dates.created_after"
+                                           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+                                </td>
+                                <td>
+                                    <button v-if="search.dates.created_after" type="button" class="text-neg text-button"
+                                            v-on:click="dateRemove('created_after')">
+                                        @icon('close')
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>{{ trans('entities.search_created_before') }}</td>
+                                <td>
+                                    <button type="button" class="text-button" v-if="!search.dates.created_before"
+                                            v-on:click="enableDate('created_before')">{{ trans('entities.search_set_date') }}</button>
+
+                                </td>
+                            </tr>
+                            <tr v-if="search.dates.created_before">
+                                <td>
+                                    <input v-if="search.dates.created_before" class="tag-input"
+                                           v-on:input="dateChange('created_before')" type="date" v-model="search.dates.created_before"
+                                           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+                                </td>
+                                <td>
+                                    <button v-if="search.dates.created_before" type="button" class="text-neg text-button"
+                                            v-on:click="dateRemove('created_before')">
+                                        @icon('close')
+                                    </button>
+                                </td>
+                            </tr>
+                        </table>
+
+
+                        <button type="submit" class="button primary">{{ trans('entities.search_update') }}</button>
+                    </form>
+
+                </div>
+            </div>
+            <div>
+                <div v-pre class="card content-wrap">
+                    <h1 class="list-heading">{{ trans('entities.search_results') }}</h1>
+                    <h6 class="text-muted">{{ trans_choice('entities.search_total_results_found', $totalResults, ['count' => $totalResults]) }}</h6>
+                    <div class="book-contents">
+                        @include('partials.entity-list', ['entities' => $entities])
+                    </div>
+                    @if($hasNextPage)
+                        <div class="text-right mt-m">
+                            <a href="{{ $nextPageLink }}" class="button outline">{{ trans('entities.search_more') }}</a>
+                        </div>
+                    @endif
+                </div>
+            </div>
+        </div>
 
-        <h1>{{ trans('entities.search_results') }}</h1>
-        <h6 class="text-muted">{{ trans_choice('entities.search_total_results_found', $totalResults, ['count' => $totalResults]) }}</h6>
-        @include('partials/entity-list', ['entities' => $entities])
-        @if ($hasNextPage)
-            <a href="{{ $nextPageLink }}" class="button">{{ trans('entities.search_more') }}</a>
-        @endif
     </div>
 @stop
diff --git a/resources/views/shelves/delete.blade.php b/resources/views/shelves/delete.blade.php
index f3ad62456..f5a84c8ad 100644
--- a/resources/views/shelves/delete.blade.php
+++ b/resources/views/shelves/delete.blade.php
@@ -1,22 +1,26 @@
 @extends('simple-layout')
 
-@section('toolbar')
-    <div class="col-sm-12 faded">
-        @include('shelves._breadcrumbs', ['shelf' => $shelf])
-    </div>
-@stop
-
 @section('body')
 
     <div class="container small">
-        <p>&nbsp;</p>
-        <div class="card">
-            <h3>@icon('delete') {{ trans('entities.shelves_delete') }}</h3>
-            <div class="body">
-                <p>{{ trans('entities.shelves_delete_explain', ['name' => $shelf->name]) }}</p>
-                <p class="text-neg">{{ trans('entities.shelves_delete_confirmation') }}</p>
 
-                <form action="{{ $shelf->getUrl() }}" method="POST">
+        <div class="my-l">
+            @include('partials.breadcrumbs', ['crumbs' => [
+                $shelf,
+                $shelf->getUrl('/delete') => trans('entities.shelves_delete')
+            ]])
+        </div>
+
+        <div class="card content-wrap auto-height">
+            <h1 class="list-heading">{{ trans('entities.shelves_delete') }}</h1>
+            <p>{{ trans('entities.shelves_delete_explain', ['name' => $shelf->name]) }}</p>
+
+            <div class="grid half">
+                <p class="text-neg">
+                    <strong>{{ trans('entities.shelves_delete_confirmation') }}</strong>
+                </p>
+
+                <form action="{{ $shelf->getUrl() }}" method="POST" class="text-right">
                     {!! csrf_field() !!}
                     <input type="hidden" name="_method" value="DELETE">
 
@@ -24,6 +28,8 @@
                     <button type="submit" class="button">{{ trans('common.confirm') }}</button>
                 </form>
             </div>
+
+
         </div>
     </div>
 
diff --git a/resources/views/shelves/edit.blade.php b/resources/views/shelves/edit.blade.php
index ab88051e5..2199d1a54 100644
--- a/resources/views/shelves/edit.blade.php
+++ b/resources/views/shelves/edit.blade.php
@@ -1,24 +1,24 @@
 @extends('simple-layout')
 
-@section('toolbar')
-    <div class="col-sm-12 faded">
-        @include('shelves._breadcrumbs', ['shelf' => $shelf])
-    </div>
-@stop
-
 @section('body')
 
     <div class="container small">
-        <p>&nbsp;</p>
-        <div class="card">
-            <h3>@icon('edit') {{ trans('entities.shelves_edit') }}</h3>
-            <div class="body">
-                <form action="{{ $shelf->getUrl() }}" method="POST">
-                    <input type="hidden" name="_method" value="PUT">
-                    @include('shelves/form', ['model' => $shelf])
-                </form>
-            </div>
+
+        <div class="my-l">
+            @include('partials.breadcrumbs', ['crumbs' => [
+                $shelf,
+                $shelf->getUrl('/edit') => trans('entities.shelves_edit')
+            ]])
+        </div>
+
+        <div class="card content-wrap">
+            <h1 class="list-heading">{{ trans('entities.shelves_edit') }}</h1>
+            <form action="{{ $shelf->getUrl() }}" method="POST">
+                <input type="hidden" name="_method" value="PUT">
+                @include('shelves/form', ['model' => $shelf])
+            </form>
         </div>
     </div>
-@include('components.image-manager', ['imageType' => 'cover'])
+
+    @include('components.image-manager', ['imageType' => 'cover'])
 @stop
\ No newline at end of file
diff --git a/resources/views/shelves/grid-item.blade.php b/resources/views/shelves/grid-item.blade.php
index b70b5166e..c2d1b6127 100644
--- a/resources/views/shelves/grid-item.blade.php
+++ b/resources/views/shelves/grid-item.blade.php
@@ -1,18 +1,19 @@
-<div class="bookshelf-grid-item grid-card"  data-entity-type="bookshelf" data-entity-id="{{$bookshelf->id}}">
-    <div class="featured-image-container">
-        <a href="{{$bookshelf->getUrl()}}" title="{{$bookshelf->name}}">
-            <img src="{{$bookshelf->getBookCover()}}" alt="{{$bookshelf->name}}">
-        </a>
+<a href="{{$shelf->getUrl()}}" class="bookshelf-grid-item grid-card"
+   data-entity-type="bookshelf" data-entity-id="{{$shelf->id}}">
+    <div class="featured-image-container bg-shelf">
+        <img src="{{$shelf->getBookCover()}}" alt="{{$shelf->name}}">
     </div>
     <div class="grid-card-content">
-        <h2><a class="break-text" href="{{$bookshelf->getUrl()}}" title="{{$bookshelf->name}}">{{$bookshelf->getShortName(35)}}</a></h2>
-        @if(isset($bookshelf->searchSnippet))
-            <p >{!! $bookshelf->searchSnippet !!}</p>
+        <h2>{{$shelf->getShortName(35)}}</h2>
+        @if(isset($shelf->searchSnippet))
+            <p class="text-muted">{!! $shelf->searchSnippet !!}</p>
         @else
-            <p >{{ $bookshelf->getExcerpt(130) }}</p>
+            <p class="text-muted">{{ $shelf->getExcerpt(130) }}</p>
         @endif
     </div>
     <div class="grid-card-footer text-muted text-small">
-        <span>@include('partials.entity-meta', ['entity' => $bookshelf])</span>
+        @icon('star')<span title="{{$shelf->created_at->toDayDateTimeString()}}">{{ trans('entities.meta_created', ['timeLength' => $shelf->created_at->diffForHumans()]) }}</span>
+        <br>
+        @icon('edit')<span title="{{ $shelf->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $shelf->updated_at->diffForHumans()]) }}</span>
     </div>
-</div>
\ No newline at end of file
+</a>
\ No newline at end of file
diff --git a/resources/views/shelves/index.blade.php b/resources/views/shelves/index.blade.php
index 717053a08..95b157df9 100644
--- a/resources/views/shelves/index.blade.php
+++ b/resources/views/shelves/index.blade.php
@@ -1,9 +1,7 @@
 @extends('tri-layout')
 
 @section('body')
-    <div class="content-wrap card">
-        @include('shelves.list', ['shelves' => $shelves, 'view' => $view])
-    </div>
+    @include('shelves.list', ['shelves' => $shelves, 'view' => $view])
 @stop
 
 @section('right')
@@ -25,13 +23,13 @@
 
 @section('left')
     @if($recents)
-        <div id="recents-shelves">
+        <div id="recents" class="mb-xl">
             <h5>{{ trans('entities.recently_viewed') }}</h5>
             @include('partials.entity-list', ['entities' => $recents, 'style' => 'compact'])
         </div>
     @endif
 
-    <div id="popular-shelves">
+    <div id="popular" class="mb-xl">
         <h5>{{ trans('entities.shelves_popular') }}</h5>
         @if(count($popular) > 0)
             @include('partials.entity-list', ['entities' => $popular, 'style' => 'compact'])
@@ -40,7 +38,7 @@
         @endif
     </div>
 
-    <div id="new-shelves">
+    <div id="new" class="mb-xl">
         <h5>{{ trans('entities.shelves_new') }}</h5>
         @if(count($new) > 0)
             @include('partials.entity-list', ['entities' => $new, 'style' => 'compact'])
diff --git a/resources/views/shelves/list-item.blade.php b/resources/views/shelves/list-item.blade.php
index 0b8e79fe5..6b6d19a7e 100644
--- a/resources/views/shelves/list-item.blade.php
+++ b/resources/views/shelves/list-item.blade.php
@@ -1,10 +1,10 @@
-<div class="shelf entity-list-item"  data-entity-type="bookshelf" data-entity-id="{{$bookshelf->id}}">
-    <h4 class="text-shelf"><a class="text-bookshelf entity-list-item-link" href="{{$bookshelf->getUrl()}}">@icon('bookshelf')<span class="entity-list-item-name break-text">{{$bookshelf->name}}</span></a></h4>
-    <div class="entity-item-snippet">
-        @if(isset($bookshelf->searchSnippet))
-            <p class="text-muted break-text">{!! $bookshelf->searchSnippet !!}</p>
-        @else
-            <p class="text-muted break-text">{{ $bookshelf->getExcerpt() }}</p>
-        @endif
+<a href="{{ $shelf->getUrl() }}" class="shelf entity-list-item" data-entity-type="bookshelf" data-entity-id="{{$shelf->id}}">
+    <div class="entity-list-item-image bg-shelf" style="background-image: url('{{ $shelf->getBookCover() }}')">
     </div>
-</div>
\ No newline at end of file
+    <div class="content">
+        <h4 class="entity-list-item-name break-text">{{ $shelf->name }}</h4>
+        <div class="entity-item-snippet">
+            <p class="text-muted break-text mb-s">{{ $shelf->getExcerpt() }}</p>
+        </div>
+    </div>
+</a>
\ No newline at end of file
diff --git a/resources/views/shelves/list.blade.php b/resources/views/shelves/list.blade.php
index bbc7dcffd..a914eba49 100644
--- a/resources/views/shelves/list.blade.php
+++ b/resources/views/shelves/list.blade.php
@@ -1,20 +1,27 @@
 
-<div class="container{{ $view === 'list' ? ' small' : '' }}">
-    {{--TODO - Align with books page, Have sorting operations--}}
+<div class="content-wrap card">
     {{--TODO - Create unique list item--}}
-    <h1>{{ trans('entities.shelves') }}</h1>
+
+    <div class="grid half v-center">
+        <h1 class="list-heading">{{ trans('entities.shelves') }}</h1>
+        <div class="text-right">
+            @include('partials.sort', ['options' => $sortOptions, 'order' => $order, 'sort' => $sort, 'type' => 'bookshelves'])
+        </div>
+    </div>
+
     @if(count($shelves) > 0)
-        @if($view === 'grid')
-            <div class="grid third">
-                @foreach($shelves as $key => $shelf)
-                    @include('shelves/grid-item', ['bookshelf' => $shelf])
+        @if($view === 'list')
+            <div class="entity-list">
+                @foreach($shelves as $shelf)
+                    @include('shelves.list-item', ['shelf' => $shelf])
                 @endforeach
             </div>
         @else
-            @foreach($shelves as $shelf)
-                @include('shelves/list-item', ['bookshelf' => $shelf])
-                <hr>
-            @endforeach
+            <div class="grid third">
+                @foreach($shelves as $key => $shelf)
+                    @include('shelves.grid-item', ['shelf' => $shelf])
+                @endforeach
+            </div>
         @endif
         <div>
             {!! $shelves->render() !!}
@@ -25,4 +32,5 @@
             <a href="{{ baseUrl("/create-shelf") }}" class="button outline">@icon('edit'){{ trans('entities.create_now') }}</a>
         @endif
     @endif
-</div>
\ No newline at end of file
+
+</div>
diff --git a/resources/views/shelves/permissions.blade.php b/resources/views/shelves/permissions.blade.php
new file mode 100644
index 000000000..174c9c83b
--- /dev/null
+++ b/resources/views/shelves/permissions.blade.php
@@ -0,0 +1,29 @@
+@extends('simple-layout')
+
+@section('body')
+
+    <div class="container small">
+
+        <div class="my-l">
+            @include('partials.breadcrumbs', ['crumbs' => [
+                $shelf,
+                $shelf->getUrl('/permissions') => trans('entities.shelves_permissions')
+            ]])
+        </div>
+
+        <div class="card content-wrap">
+            <h1 class="list-heading">{{ trans('entities.shelves_permissions') }}</h1>
+            @include('form.entity-permissions', ['model' => $shelf])
+        </div>
+
+        <div class="card content-wrap auto-height">
+            <h2 class="list-heading">{{ trans('entities.shelves_copy_permissions_to_books') }}</h2>
+            <p>{{ trans('entities.shelves_copy_permissions_explain') }}</p>
+            <form action="{{ $shelf->getUrl('/copy-permissions') }}" method="post" class="text-right">
+                {{ csrf_field() }}
+                <button class="button">{{ trans('entities.shelves_copy_permissions') }}</button>
+            </form>
+        </div>
+    </div>
+
+@stop
diff --git a/resources/views/shelves/restrictions.blade.php b/resources/views/shelves/restrictions.blade.php
deleted file mode 100644
index dbbff4bab..000000000
--- a/resources/views/shelves/restrictions.blade.php
+++ /dev/null
@@ -1,34 +0,0 @@
-@extends('simple-layout')
-
-@section('toolbar')
-    <div class="col-sm-12 faded">
-        @include('shelves._breadcrumbs', ['shelf' => $shelf])
-    </div>
-@stop
-
-@section('body')
-
-    <div class="container small">
-        <p>&nbsp;</p>
-        <div class="card">
-            <h3>@icon('lock') {{ trans('entities.shelves_permissions') }}</h3>
-            <div class="body">
-                @include('form.entity-permissions', ['model' => $shelf])
-            </div>
-        </div>
-
-        <p>&nbsp;</p>
-
-        <div class="card">
-            <h3>@icon('copy') {{ trans('entities.shelves_copy_permissions_to_books') }}</h3>
-            <div class="body">
-                <p>{{ trans('entities.shelves_copy_permissions_explain') }}</p>
-                <form action="{{ $shelf->getUrl('/copy-permissions') }}" method="post" class="text-right">
-                    {{ csrf_field() }}
-                    <button class="button">{{ trans('entities.shelves_copy_permissions') }}</button>
-                </form>
-            </div>
-        </div>
-    </div>
-
-@stop
diff --git a/resources/views/shelves/show.blade.php b/resources/views/shelves/show.blade.php
index 2aae2c6ff..91c092a09 100644
--- a/resources/views/shelves/show.blade.php
+++ b/resources/views/shelves/show.blade.php
@@ -1,42 +1,43 @@
-@extends('sidebar-layout')
+@extends('tri-layout')
 
-@section('toolbar')
-    <div class="col-sm-6 col-xs-1  faded">
-        @include('shelves._breadcrumbs', ['shelf' => $shelf])
-    </div>
-    <div class="col-sm-6 col-xs-11">
-        <div class="action-buttons faded">
-            @if(userCan('bookshelf-update', $shelf))
-                <a href="{{ $shelf->getUrl('/edit') }}" class="text-button text-primary">@icon('edit'){{ trans('common.edit') }}</a>
-            @endif
-            @if(userCan('restrictions-manage', $shelf) || userCan('bookshelf-delete', $shelf))
-                <div dropdown class="dropdown-container">
-                    <a dropdown-toggle class="text-primary text-button">@icon('more'){{ trans('common.more') }}</a>
-                    <ul>
-                        @if(userCan('restrictions-manage', $shelf))
-                            <li><a href="{{ $shelf->getUrl('/permissions') }}" class="text-primary">@icon('lock'){{ trans('entities.permissions') }}</a></li>
-                        @endif
-                        @if(userCan('bookshelf-delete', $shelf))
-                            <li><a href="{{ $shelf->getUrl('/delete') }}" class="text-neg">@icon('delete'){{ trans('common.delete') }}</a></li>
-                        @endif
-                    </ul>
+@section('body')
+
+    <div class="card content-wrap">
+        <h1 class="break-text">{{$shelf->name}}</h1>
+        <div class="book-content">
+            <p class="text-muted">{!! nl2br(e($shelf->description)) !!}</p>
+            @if(count($books) > 0)
+                <div class="entity-list">
+                    @foreach($books as $book)
+                        @include('books/list-item', ['book' => $book])
+                    @endforeach
                 </div>
+            @else
+                <p>
+                    <hr>
+                    <span class="text-muted italic">{{ trans('entities.shelves_empty_contents') }}</span>
+                    @if(userCan('bookshelf-create', $shelf))
+                        <br/>
+                        <a href="{{ $shelf->getUrl('/edit') }}" class="button outline bookshelf">{{ trans('entities.shelves_edit_and_assign') }}</a>
+                    @endif
+                </p>
             @endif
         </div>
     </div>
+
 @stop
 
-@section('sidebar')
+@section('left')
 
     @if($shelf->tags->count() > 0)
-        <section>
+        <div id="tags" class="mb-xl">
             @include('components.tag-list', ['entity' => $shelf])
-        </section>
+        </div>
     @endif
 
-    <div class="card entity-details">
-        <h3>@icon('info') {{ trans('common.details') }}</h3>
-        <div class="body text-small text-muted blended-links">
+    <div id="details" class="mb-xl">
+        <h5>{{ trans('common.details') }}</h5>
+        <div class="text-small text-muted blended-links">
             @include('partials.entity-meta', ['entity' => $shelf])
             @if($shelf->restricted)
                 <div class="active-restriction">
@@ -51,38 +52,43 @@
     </div>
 
     @if(count($activity) > 0)
-        <div class="activity card">
-            <h3>@icon('time') {{ trans('entities.recent_activity') }}</h3>
-            @include('partials/activity-list', ['activity' => $activity])
+        <div class="mb-xl">
+            <h5>{{ trans('entities.recent_activity') }}</h5>
+            @include('partials.activity-list', ['activity' => $activity])
         </div>
     @endif
 @stop
 
-@section('body')
+@section('right')
+    <div class="actions mb-xl">
+        <h5>{{ trans('common.actions') }}</h5>
+        <div class="icon-list text-primary">
 
-    <div class="container small nopad">
-        <h1 class="break-text">{{$shelf->name}}</h1>
-        <div class="book-content">
-            <p class="text-muted">{!! nl2br(e($shelf->description)) !!}</p>
-            @if(count($books) > 0)
-            <div class="page-list">
-                <hr>
-                @foreach($books as $book)
-                    @include('books/list-item', ['book' => $book])
-                    <hr>
-                @endforeach
-            </div>
-            @else
-            <p>
-                <hr>
-                <span class="text-muted italic">{{ trans('entities.shelves_empty_contents') }}</span>
-                @if(userCan('bookshelf-create', $shelf))
-                    <br>
-                    <a href="{{ $shelf->getUrl('/edit') }}" class="button outline bookshelf">{{ trans('entities.shelves_edit_and_assign') }}</a>
-                @endif
-            </p>
+            @if(userCan('bookshelf-update', $shelf))
+                <a href="{{ $shelf->getUrl('/edit') }}" class="icon-list-item">
+                    <span class="icon">@icon('edit')</span>
+                    <span>{{ trans('common.edit') }}</span>
+                </a>
             @endif
 
-    </div>
+            @if(userCan('restrictions-manage', $shelf))
+                <a href="{{ $shelf->getUrl('/permissions') }}" class="icon-list-item">
+                    <span class="icon">@icon('lock')</span>
+                    <span>{{ trans('entities.permissions') }}</span>
+                </a>
+            @endif
 
+            @if(userCan('bookshelf-delete', $shelf))
+                <a href="{{ $shelf->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/users/create.blade.php b/resources/views/users/create.blade.php
index e60734392..4cb29fc16 100644
--- a/resources/views/users/create.blade.php
+++ b/resources/views/users/create.blade.php
@@ -1,27 +1,30 @@
 @extends('simple-layout')
 
-{{--TODO--}}
-
-@section('toolbar')
-    @include('settings/navbar', ['selected' => 'users'])
-@stop
-
 @section('body')
 
     <div class="container small">
-        <p>&nbsp;</p>
-        <div class="card">
-            <h3>@icon('users-add') {{ trans('settings.users_add_new') }}</h3>
-            <div class="body">
-                <form action="{{ baseUrl("/settings/users/create") }}" method="post">
-                    {!! csrf_field() !!}
-                    @include('users/forms/' . $authMethod)
-                    <div class="form-group text-right">
-                        <a href="{{  baseUrl($currentUser->can('users-manage') ? "/settings/users" : "/") }}" class="button outline">{{ trans('common.cancel') }}</a>
-                        <button class="button pos" type="submit">{{ trans('common.save') }}</button>
-                    </div>
-                </form>
-            </div>
+
+        <div class="py-m">
+            @include('settings.navbar', ['selected' => 'users'])
+        </div>
+
+        <div class="card content-wrap">
+            <h1 class="list-heading">{{ trans('settings.users_add_new') }}</h1>
+
+            <form action="{{ baseUrl("/settings/users/create") }}" method="post">
+                {!! csrf_field() !!}
+
+                <div class="setting-list">
+                    @include('users.forms.' . $authMethod)
+                </div>
+
+                <div class="form-group text-right">
+                    <a href="{{  baseUrl($currentUser->can('users-manage') ? "/settings/users" : "/") }}" class="button outline">{{ trans('common.cancel') }}</a>
+                    <button class="button primary" type="submit">{{ trans('common.save') }}</button>
+                </div>
+
+            </form>
+
         </div>
     </div>
 
diff --git a/resources/views/users/delete.blade.php b/resources/views/users/delete.blade.php
index 39cd12200..15ad7a9ec 100644
--- a/resources/views/users/delete.blade.php
+++ b/resources/views/users/delete.blade.php
@@ -1,27 +1,30 @@
 @extends('simple-layout')
 
-@section('toolbar')
-    @include('settings/navbar', ['selected' => 'users'])
-@stop
-
 @section('body')
-
     <div class="container small">
-        <p>&nbsp;</p>
-        <div class="card">
-            <h3>@icon('delete') {{ trans('settings.users_delete') }}</h3>
-            <div class="body">
-                <p>{{ trans('settings.users_delete_warning', ['userName' => $user->name]) }}</p>
-                <p class="text-neg">{{ trans('settings.users_delete_confirm') }}</p>
 
-                <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="POST">
-                    {!! csrf_field() !!}
-                    <input type="hidden" name="_method" value="DELETE">
-                    <a href="{{ baseUrl("/settings/users/{$user->id}") }}" class="button outline">{{ trans('common.cancel') }}</a>
-                    <button type="submit" class="button neg">{{ trans('common.confirm') }}</button>
-                </form>
+        <div class="py-m">
+            @include('settings.navbar', ['selected' => 'users'])
+        </div>
+
+        <div class="card content-wrap auto-height">
+            <h1 class="list-heading">{{ trans('settings.users_delete') }}</h1>
+
+            <p>{{ trans('settings.users_delete_warning', ['userName' => $user->name]) }}</p>
+
+            <div class="grid half">
+                <p class="text-neg"><strong>{{ trans('settings.users_delete_confirm') }}</strong></p>
+                <div>
+                    <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="POST" class="text-right">
+                        {!! csrf_field() !!}
+
+                        <input type="hidden" name="_method" value="DELETE">
+                        <a href="{{ baseUrl("/settings/users/{$user->id}") }}" class="button outline">{{ trans('common.cancel') }}</a>
+                        <button type="submit" class="button primary">{{ trans('common.confirm') }}</button>
+                    </form>
+                </div>
             </div>
+
         </div>
     </div>
-
 @stop
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php
index 58780f7f4..d6a4563ea 100644
--- a/resources/views/users/edit.blade.php
+++ b/resources/views/users/edit.blade.php
@@ -1,92 +1,88 @@
 @extends('simple-layout')
 
-{{--TODO--}}
-
-@section('toolbar')
-    @include('settings/navbar', ['selected' => 'users'])
-@stop
-
 @section('body')
-
     <div class="container small">
-        <p>&nbsp;</p>
-        <div class="card">
-            <h3>@icon('edit') {{ $user->id === $currentUser->id ? trans('settings.users_edit_profile') : trans('settings.users_edit') }}</h3>
-            <div class="body">
-                <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="post">
-                    <div class="row">
-                        <div class="col-sm-6">
-                            {!! csrf_field() !!}
-                            <input type="hidden" name="_method" value="put">
-                            @include('users.forms.' . $authMethod, ['model' => $user])
 
+        <div class="py-m">
+            @include('settings.navbar', ['selected' => 'users'])
+        </div>
+
+        <div class="card content-wrap">
+            <h1 class="list-heading">{{ $user->id === $currentUser->id ? trans('settings.users_edit_profile') : trans('settings.users_edit') }}</h1>
+            <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="post">
+                {!! csrf_field() !!}
+                <input type="hidden" name="_method" value="PUT">
+
+                <div class="setting-list">
+                    @include('users.forms.' . $authMethod, ['model' => $user])
+
+                    <div class="grid half large-gap">
+                        <div>
+                            <label for="user-avatar" class="setting-list-label">{{ trans('settings.users_avatar') }}</label>
+                            <p class="small">{{ trans('settings.users_avatar_desc') }}</p>
                         </div>
-                        <div class="col-sm-6">
-                            <div class="form-group" id="logo-control">
-                                <label for="user-avatar">{{ trans('settings.users_avatar') }}</label>
-                                <p class="small">{{ trans('settings.users_avatar_desc') }}</p>
-
-                                @include('components.image-picker', [
-                                      'resizeHeight' => '512',
-                                      'resizeWidth' => '512',
-                                      'showRemove' => false,
-                                      'defaultImage' => baseUrl('/user_avatar.png'),
-                                      'currentImage' => $user->getAvatar(80),
-                                      'currentId' => $user->image_id,
-                                      'name' => 'image_id',
-                                      'imageClass' => 'avatar large'
-                                  ])
-                            </div>
-                            <div class="form-group">
-                                <label for="user-language">{{ trans('settings.users_preferred_language') }}</label>
-                                <select name="setting[language]" id="user-language">
-                                    @foreach(trans('settings.language_select') as $lang => $label)
-                                        <option @if(setting()->getUser($user, 'language') === $lang) selected @endif value="{{ $lang }}">{{ $label }}</option>
-                                    @endforeach
-                                </select>
-                            </div>
+                        <div>
+                            @include('components.image-picker', [
+                                'resizeHeight' => '512',
+                                'resizeWidth' => '512',
+                                'showRemove' => false,
+                                'defaultImage' => baseUrl('/user_avatar.png'),
+                                'currentImage' => $user->getAvatar(80),
+                                'currentId' => $user->image_id,
+                                'name' => 'image_id',
+                                'imageClass' => 'avatar large'
+                            ])
                         </div>
                     </div>
-                    <div class="form-group text-right">
-                        <a href="{{  baseUrl($currentUser->can('users-manage') ? "/settings/users" : "/") }}" class="button outline">{{ trans('common.cancel') }}</a>
-                        @if($authMethod !== 'system')
-                            <a href="{{ baseUrl("/settings/users/{$user->id}/delete") }}" class="neg button">{{ trans('settings.users_delete') }}</a>
-                        @endif
-                        <button class="button pos" type="submit">{{ trans('common.save') }}</button>
+
+                    <div class="grid half large-gap">
+                        <div>
+                            <label for="user-language" class="setting-list-label">{{ trans('settings.users_preferred_language') }}</label>
+                        </div>
+                        <div>
+                            <select name="setting[language]" id="user-language">
+                                @foreach(trans('settings.language_select') as $lang => $label)
+                                    <option @if(setting()->getUser($user, 'language') === $lang) selected @endif value="{{ $lang }}">{{ $label }}</option>
+                                @endforeach
+                            </select>
+                        </div>
                     </div>
-                </form>
-            </div>
+
+                </div>
+
+                <div class="text-right">
+                    <a href="{{  baseUrl($currentUser->can('users-manage') ? "/settings/users" : "/") }}" class="button outline">{{ trans('common.cancel') }}</a>
+                    @if($authMethod !== 'system')
+                        <a href="{{ baseUrl("/settings/users/{$user->id}/delete") }}" class="button outline">{{ trans('settings.users_delete') }}</a>
+                    @endif
+                    <button class="button primary" type="submit">{{ trans('common.save') }}</button>
+                </div>
+            </form>
         </div>
 
         @if($currentUser->id === $user->id && count($activeSocialDrivers) > 0)
-            <div class="card">
-                <h3>@icon('login')  {{ trans('settings.users_social_accounts') }}</h3>
-                <div class="body">
-                    <p class="text-muted">{{ trans('settings.users_social_accounts_info') }}</p>
-                    <div class="container">
-                        <div class="row">
-                            @foreach($activeSocialDrivers as $driver => $enabled)
-                                <div class="col-sm-4 col-xs-6 text-center">
-                                    <div>@icon('auth/'. $driver, ['style' => 'width: 56px;height: 56px;'])</div>
-                                    <div>
-                                        @if($user->hasSocialAccount($driver))
-                                            <a href="{{ baseUrl("/login/service/{$driver}/detach") }}" class="button neg">{{ trans('settings.users_social_disconnect') }}</a>
-                                        @else
-                                            <a href="{{ baseUrl("/login/service/{$driver}") }}" class="button pos">{{ trans('settings.users_social_connect') }}</a>
-                                        @endif
-                                    </div>
-                                    <div>&nbsp;</div>
+            <div class="card content-wrap auto-height">
+                <h2 class="list-heading">{{ trans('settings.users_social_accounts') }}</h2>
+                <p class="text-muted">{{ trans('settings.users_social_accounts_info') }}</p>
+                <div class="container">
+                    <div class="grid third">
+                        @foreach($activeSocialDrivers as $driver => $enabled)
+                            <div class="text-center mb-m">
+                                <div>@icon('auth/'. $driver, ['style' => 'width: 56px;height: 56px;'])</div>
+                                <div>
+                                    @if($user->hasSocialAccount($driver))
+                                        <a href="{{ baseUrl("/login/service/{$driver}/detach") }}" class="button small outline">{{ trans('settings.users_social_disconnect') }}</a>
+                                    @else
+                                        <a href="{{ baseUrl("/login/service/{$driver}") }}" class="button small outline">{{ trans('settings.users_social_connect') }}</a>
+                                    @endif
                                 </div>
-                            @endforeach
-                        </div>
+                            </div>
+                        @endforeach
                     </div>
                 </div>
             </div>
         @endif
-
-
     </div>
 
-    <p class="margin-top large"><br></p>
     @include('components.image-manager', ['imageType' => 'user'])
 @stop
\ No newline at end of file
diff --git a/resources/views/users/forms/ldap.blade.php b/resources/views/users/forms/ldap.blade.php
index f6e8b4c80..8c7c87476 100644
--- a/resources/views/users/forms/ldap.blade.php
+++ b/resources/views/users/forms/ldap.blade.php
@@ -1,3 +1,5 @@
+{{--TODO--}}
+
 <div class="form-group">
     <label for="name">{{ trans('auth.name') }}</label>
     @include('form.text', ['name' => 'name'])
diff --git a/resources/views/users/forms/standard.blade.php b/resources/views/users/forms/standard.blade.php
index fa712368b..097af9cf8 100644
--- a/resources/views/users/forms/standard.blade.php
+++ b/resources/views/users/forms/standard.blade.php
@@ -1,34 +1,47 @@
-<div class="form-group">
-    <label for="name">{{ trans('auth.name') }}</label>
-    @include('form.text', ['name' => 'name'])
+
+<div class="pt-m">
+    <label class="setting-list-label">{{ trans('settings.users_details') }}</label>
+    <p class="small">{{ trans('settings.users_details_desc') }}</p>
+    <div class="grid half mt-m large-gap">
+        <div>
+            <label for="name">{{ trans('auth.name') }}</label>
+            @include('form.text', ['name' => 'name'])
+        </div>
+        <div>
+            <label for="email">{{ trans('auth.email') }}</label>
+            @include('form.text', ['name' => 'email'])
+        </div>
+    </div>
 </div>
 
-<div class="form-group">
-    <label for="email">{{ trans('auth.email') }}</label>
-    @include('form.text', ['name' => 'email'])
-</div>
 
 @if(userCan('users-manage'))
-    <div class="form-group">
-        <label for="role">{{ trans('settings.users_role') }}</label>
-        @include('form/role-checkboxes', ['name' => 'roles', 'roles' => $roles])
+    <div>
+        <label for="role" class="setting-list-label">{{ trans('settings.users_role') }}</label>
+        <p class="small">{{ trans('settings.users_role_desc') }}</p>
+        <div class="mt-m">
+            @include('form/role-checkboxes', ['name' => 'roles', 'roles' => $roles])
+        </div>
     </div>
 @endif
 
-@if(isset($model))
-    <div class="form-group">
-        <span class="text-muted">
+
+<div>
+    <label class="setting-list-label">{{ trans('settings.users_password') }}</label>
+    <p class="small">{{ trans('settings.users_password_desc') }}</p>
+    @if(isset($model))
+        <p class="small">
             {{ trans('settings.users_password_warning') }}
-        </span>
+        </p>
+    @endif
+    <div class="grid half mt-m large-gap">
+        <div>
+            <label for="password">{{ trans('auth.password') }}</label>
+            @include('form.password', ['name' => 'password'])
+        </div>
+        <div>
+            <label for="password-confirm">{{ trans('auth.password_confirm') }}</label>
+            @include('form.password', ['name' => 'password-confirm'])
+        </div>
     </div>
-@endif
-
-<div class="form-group">
-    <label for="password">{{ trans('auth.password') }}</label>
-    @include('form.password', ['name' => 'password'])
-</div>
-
-<div class="form-group">
-    <label for="password-confirm">{{ trans('auth.password_confirm') }}</label>
-    @include('form.password', ['name' => 'password-confirm'])
 </div>
\ No newline at end of file
diff --git a/resources/views/users/forms/system.blade.php b/resources/views/users/forms/system.blade.php
index 6243010a4..7d33b75a1 100644
--- a/resources/views/users/forms/system.blade.php
+++ b/resources/views/users/forms/system.blade.php
@@ -1,3 +1,5 @@
+{{--TODO--}}
+
 @if($user->system_name == 'public')
     <p>{{ trans('settings.users_system_public') }}</p>
 @endif
diff --git a/resources/views/users/index.blade.php b/resources/views/users/index.blade.php
index 3d047c015..af6b4d4f9 100644
--- a/resources/views/users/index.blade.php
+++ b/resources/views/users/index.blade.php
@@ -4,7 +4,7 @@
     <div class="container small">
 
         <div class="py-m">
-            @include('settings/navbar', ['selected' => 'users'])
+            @include('settings.navbar', ['selected' => 'users'])
         </div>
 
         <div class="card content-wrap">
diff --git a/routes/web.php b/routes/web.php
index 813855de5..8f6bb51e8 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -10,7 +10,6 @@ Route::group(['middleware' => 'auth'], function () {
         ->where('path', '.*$');
 
     Route::group(['prefix' => 'pages'], function() {
-        Route::get('/recently-created', 'PageController@showRecentlyCreated');
         Route::get('/recently-updated', 'PageController@showRecentlyUpdated');
     });
 
@@ -24,8 +23,8 @@ Route::group(['middleware' => 'auth'], function () {
         Route::get('/{slug}', 'BookshelfController@show');
         Route::put('/{slug}', 'BookshelfController@update');
         Route::delete('/{slug}', 'BookshelfController@destroy');
-        Route::get('/{slug}/permissions', 'BookshelfController@showRestrict');
-        Route::put('/{slug}/permissions', 'BookshelfController@restrict');
+        Route::get('/{slug}/permissions', 'BookshelfController@showPermissions');
+        Route::put('/{slug}/permissions', 'BookshelfController@permissions');
         Route::post('/{slug}/copy-permissions', 'BookshelfController@copyPermissions');
     });
 
@@ -176,7 +175,7 @@ Route::group(['middleware' => 'auth'], function () {
         Route::get('/users/{id}/delete', 'UserController@delete');
         Route::patch('/users/{id}/switch-book-view', 'UserController@switchBookView');
         Route::patch('/users/{id}/switch-shelf-view', 'UserController@switchShelfView');
-        Route::patch('/users/{id}/change-books-sort', 'UserController@changeBooksSort');
+        Route::patch('/users/{id}/change-sort/{type}', 'UserController@changeSort');
         Route::post('/users/create', 'UserController@store');
         Route::get('/users/{id}', 'UserController@edit');
         Route::put('/users/{id}', 'UserController@update');