diff --git a/Gemfile b/Gemfile
index e7d20d945..ff5851039 100644
--- a/Gemfile
+++ b/Gemfile
@@ -26,10 +26,10 @@ group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem "byebug", platforms: %i[mri mingw x64_mingw]
   gem "capybara"
-  gem "pry-byebug"
   gem "dotenv-rails"
-  gem "selenium-webdriver"
   gem "factory_bot_rails"
+  gem "pry-byebug"
+  gem "selenium-webdriver"
   %w[rspec-core rspec-expectations rspec-mocks rspec-rails rspec-support].each do |lib|
     gem lib, git: "https://github.com/rspec/#{lib}.git", branch: "main"
   end
@@ -41,12 +41,12 @@ group :development do
   # Display performance information such as SQL time and flame graphs for each request in your browser.
   # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
   gem "listen", "~> 3.3"
+  gem "overcommit", ">= 0.37.0", require: false
   gem "rack-mini-profiler", "~> 2.0"
   gem "rubocop-govuk"
   gem "rubocop-performance", require: false
   gem "rubocop-rails"
   gem "scss_lint-govuk"
-  gem "overcommit", ">= 0.37.0", require: false
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
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/models/case_log.rb b/app/models/case_log.rb
index 9fd005fb7..3f860cc08 100644
--- a/app/models/case_log.rb
+++ b/app/models/case_log.rb
@@ -1,3 +1,3 @@
 class CaseLog < ApplicationRecord
-  enum status: ["in progress", "submitted"]
+  enum status: { "in progress" => 0, "submitted" => 1 }
 end
diff --git a/app/views/case_logs/_tasklist.html.erb b/app/views/case_logs/_tasklist.html.erb
new file mode 100644
index 000000000..02e4cb139
--- /dev/null
+++ b/app/views/case_logs/_tasklist.html.erb
@@ -0,0 +1,28 @@
+<%# Placeholder until we have a real form schema %>
+<%
+  sections = {
+    "About the household" => ["Household characteristics", "Household situation", "Household needs"],
+    "Tenancy and property information" => ["Tenancy information", "Property information"],
+    "Rent and charges" => ["Income & benefits", "Rent"],
+    "Local Authority" => ["Local authority"],
+    "Submission" => ["Declaration"]
+  }
+%>
+
+<ol class="app-task-list app-task-list--no-numbers">
+  <% sections.map do |section, subsections| %>
+    <li>
+      <h2 class="app-task-list__section">
+        <span class="app-task-list__section-number"><%= section %></span>
+      </h2>
+      <ul class="app-task-list__items">
+        <% subsections.map do |subsection| %>
+          <li class="app-task-list__item">
+            <a class="task-name" href="#"><%= subsection %></a>
+            <strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong>
+          </li>
+        <% end %>
+      </ul>
+    </li>
+  <% end %>
+</ol>
diff --git a/app/views/case_logs/show.html.erb b/app/views/case_logs/show.html.erb
index 5c42fa4db..44cdf648f 100644
--- a/app/views/case_logs/show.html.erb
+++ b/app/views/case_logs/show.html.erb
@@ -1,3 +1,15 @@
-<h1 class="govuk-heading-xl">Tasklist for log <%= @case_log.id %></h1>
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    <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>
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is
+      <%= @case_log.status %></h2>
+    <p class="govuk-body govuk-!-margin-bottom-7">You've completed 0 of 9 sections.</p>
+    <p class="govuk-body govuk-!-margin-bottom-7">
+      <a href="#">Skip to next incomplete section</a>
+    </p>
+
+    <%= render "tasklist" %>
+  </div>
+</div>
diff --git a/spec/factories/case_log.rb b/spec/factories/case_log.rb
index cefc12c97..9380466df 100644
--- a/spec/factories/case_log.rb
+++ b/spec/factories/case_log.rb
@@ -1,6 +1,6 @@
 FactoryBot.define do
   factory :case_log do
-    id { 342351 }
+    id { 342_351 }
     status { 0 }
   end
 end
diff --git a/spec/features/case_log_spec.rb b/spec/features/case_log_spec.rb
index 05bdaa6c1..4cbba23b2 100644
--- a/spec/features/case_log_spec.rb
+++ b/spec/features/case_log_spec.rb
@@ -1,11 +1,12 @@
 require "rails_helper"
 RSpec.describe "Test Features" do
-  let!(:case_log){ FactoryBot.create(:case_log) }
-  let(:id){ case_log.id }
+  let!(:case_log) { FactoryBot.create(:case_log) }
+  let(:id) { case_log.id }
   let(:status) { case_log.status }
 
   it "Displays a tasklist header" do
     visit("/case_logs/342351")
-    expect(page).to have_content("Tasklist for log 342351")
+    expect(page).to have_content("Tasklist for log #{id}")
+    expect(page).to have_content("This submission is #{status}")
   end
 end
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index 6cf19332c..efc2ff51f 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -87,7 +87,7 @@ RSpec.configure do |config|
   #   # order dependency and want to debug it, you can fix the order by providing
   #   # the seed, which is printed after each run.
   #   #     --seed 1234
-     config.order = :random
+  config.order = :random
   #
   #   # Seed global randomization in this process using the `--seed` CLI option.
   #   # Setting this allows you to use `--seed` to deterministically reproduce
@@ -95,6 +95,5 @@ RSpec.configure do |config|
   #   # as the one that triggered the failure.
   #   Kernel.srand config.seed
 
-
   config.include FactoryBot::Syntax::Methods
 end