diff --git a/app/javascript/styles/_task-list.scss b/app/javascript/styles/_task-list.scss
new file mode 100644
index 000000000..88755e077
--- /dev/null
+++ b/app/javascript/styles/_task-list.scss
@@ -0,0 +1,82 @@
+
+// Task list pattern
+
+.app-task-list {
+  list-style-type: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  @include govuk-media-query($from: tablet) {
+    min-width: 550px;
+  }
+}
+
+.app-task-list__section {
+  display: table;
+  @include govuk-font($size:24, $weight: bold);
+}
+
+.app-task-list__section-number {
+  display: table-cell;
+
+  @include govuk-media-query($from: tablet) {
+    min-width: govuk-spacing(6);
+    padding-right: 0;
+  }
+}
+
+.app-task-list__items {
+  @include govuk-font($size: 19);
+  @include govuk-responsive-margin(9, "bottom");
+  list-style: none;
+  padding-left: 0;
+  @include govuk-media-query($from: tablet) {
+    padding-left: govuk-spacing(6);
+  }
+}
+
+.app-task-list__item {
+  border-bottom: 1px solid $govuk-border-colour;
+  margin-bottom: 0 !important;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2);
+  @include govuk-clearfix;
+}
+
+.app-task-list__item:first-child {
+  border-top: 1px solid $govuk-border-colour;
+}
+
+.app-task-list__task-name {
+  display: block;
+  @include govuk-media-query($from: 450px) {
+    float: left;
+  }
+}
+
+// The `app-task-list__task-completed` class was previously used on the task
+// list for the completed tag (changed in 86c90ec) – it's still included here to
+// avoid breaking task lists in existing prototypes.
+.app-task-list__tag,
+.app-task-list__task-completed {
+  margin-top: govuk-spacing(2);
+  margin-bottom: govuk-spacing(1);
+
+  @include govuk-media-query($from: 450px) {
+    float: right;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+
+//custom
+.app-task-list {
+  &__item:target {
+  }
+  &--no-numbers &__items {
+    @include govuk-media-query($from: tablet) {
+      padding-left: 0;
+    }
+  }
+}
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 8f7639795..4caf03bda 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -10,3 +10,5 @@ $govuk-font-url-function: frontend-font-url;
 $govuk-image-url-function: frontend-image-url;
 
 @import "~govuk-frontend/govuk/all";
+
+@import '_task-list'
diff --git a/app/views/case_logs/show.html.erb b/app/views/case_logs/show.html.erb
index 5c42fa4db..76dac1f86 100644
--- a/app/views/case_logs/show.html.erb
+++ b/app/views/case_logs/show.html.erb
@@ -1,3 +1,29 @@
 <h1 class="govuk-heading-xl">Tasklist for log <%= @case_log.id %></h1>
 
 <h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is <%= @case_log.status %></h2>
+
+<br />
+
+<ol class="app-task-list app-task-list--no-numbers">
+  <li>
+    <h2 class="app-task-list__section">
+      <span class="app-task-list__section-number">About the household</span>
+    </h2>
+    <ul class="app-task-list__items">
+      <li class="app-task-list__item">
+        <a class="task-name" href="">Household characteristics</a>
+        <strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong>
+      </li>
+
+      <li class="app-task-list__item">
+        <a class="task-name" href="">Household situation</a>
+        <strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong>
+      </li>
+
+      <li class="app-task-list__item">
+        <a class="task-name" href="">Household needs</a>
+        <strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong>
+      </li>
+    </ul>
+  </li>
+</ol>