diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index e0ba2ae42..679443313 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -16,6 +16,9 @@
     margin: $-s 0 0 0;
     border-left: 5px solid $color-page;
     padding: $-xs 0 $-xs $-m;
+    &.draft {
+      border-left-color: $color-page-draft;
+    }
   }
   hr {
     margin-top: 0;
diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index f76fa4d01..721eeb238 100644
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -206,6 +206,12 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
   &:hover {
     color: $color-page;
   }
+  &.draft {
+    color: $color-page-draft;
+  }
+  &.draft:hover {
+    color: $color-page-draft;
+  }
 }
 .text-chapter {
   color: $color-chapter;
diff --git a/resources/views/chapters/list-item.blade.php b/resources/views/chapters/list-item.blade.php
index beaf1cac2..d5ac46338 100644
--- a/resources/views/chapters/list-item.blade.php
+++ b/resources/views/chapters/list-item.blade.php
@@ -14,7 +14,7 @@
         <p class="text-muted chapter-toggle"><i class="zmdi zmdi-caret-right"></i> <i class="zmdi zmdi-file-text"></i> <span>{{ count($chapter->pages) }} Pages</span></p>
         <div class="inset-list">
             @foreach($chapter->pages as $page)
-                <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
+                <h4 class="@if($page->draft) draft @endif"><a href="{{$page->getUrl()}}" class="text-page @if($page->draft) draft @endif"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
             @endforeach
         </div>
     @endif