diff --git a/src/index.js b/src/index.js
index 9164995..078e24d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,3 +8,5 @@
 import "bootstrap-icons/font/bootstrap-icons.scss"
 import "bootstrap/scss/bootstrap.scss"
 import * as bootstrap from "bootstrap"
+
+import "./scss/list.scss"
diff --git a/src/scss/list.scss b/src/scss/list.scss
new file mode 100644
index 0000000..fade689
--- /dev/null
+++ b/src/scss/list.scss
@@ -0,0 +1,46 @@
+// task list view stylesheet
+
+$list-img-max-size: 5rem;
+
+.task {
+  [aria-label=TaskAssignee] {
+    img.avatar {
+      max-height: $list-img-max-size;
+      max-width: $list-img-max-size;
+      margin-bottom: 1rem;
+    }
+  }
+
+  [aria-label=TaskDetails] {
+    div:first-of-type {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  [aria-label=TaskActions] {
+    .disabled {
+      pointer-events: none;
+      color: var(--bs-secondary-color);
+    }
+  }
+
+  // action buttons
+  [aria-label=complete] {
+    color: var(--bs-success);
+  }
+
+  [aria-label=reopen] {
+    color: var(--bs-warning);
+  }
+
+  [aria-label=delete] {
+    color: var(--bs-danger);
+  }
+}
+
+.task[data-task-completed=true] {
+  .task-detail-ref {
+    color: var(--bs-secondary-color) !important;
+    text-decoration: line-through !important;
+  }
+}
diff --git a/src/views/_template.hbs b/src/views/list_view.hbs
similarity index 78%
rename from src/views/_template.hbs
rename to src/views/list_view.hbs
index 6b4fbbf..91f37b5 100644
--- a/src/views/_template.hbs
+++ b/src/views/list_view.hbs
@@ -1,5 +1,5 @@
 
-
+
 
   
   
   
   
-  {{title}} | {{site}}
+  {{title}} | Task Tracker
 
 
+{{! TODO: add header/navbar }}
 
   
-
+    {{>partials/list_main}}
   
  
 
diff --git a/src/views/partials/list_main.hbs b/src/views/partials/list_main.hbs
new file mode 100644
index 0000000..ded18c1
--- /dev/null
+++ b/src/views/partials/list_main.hbs
@@ -0,0 +1,74 @@
+
+  
+    
+    
+      
+        task list
+        
+        
+          | Assignee+ | Task Summary+ | Actions+ | 
+        
+        
+        {{! repeating tasks block }}
+        {{>list_task
+            pk="a76e9fac-f8ca-45ca-ae57-063459443ff0"
+            summary="Shield at the holodeck was the energy of assimilation, lowered to a chemical c-beam."
+            description="The creature is more transformator now than starship. solid and always quirky.
+            energy at the wormhole was the life of ellipse, grabed to a mysterious proton.
+            adventure at the space station was the flight of honor, translated to a unrelated hur'q.
+            Mermaids reproduce from pressures like sub-light hur'qs?"
+            assignee_image="https://i.pravatar.cc/?u=DoraHeadstrong@dayrep.com"
+            assignee_first_name="Dora"
+            assignee_last_name="Headstrong"
+            completed=false
+            can_edit=false
+        }}
+        {{>list_task
+            pk="a76e9fac-f8ca-45ca-ae57-063459443ff0"
+            summary="Sensor at the universe was the pattern of love, empowered to a futile alien."
+            description="The nanomachine is more admiral now than processor. senior and patiently dead.
+            pattern at the center was the death of attitude, loved to a biological ship.
+            sensor at the space station was the assimilation of resistance, destroyed to an ancient crew.
+            The collective admiral finally manifests the planet?"
+            assignee_image="https://i.pravatar.cc/?u=PippinSackville-Baggins@jourrapide.com"
+            assignee_first_name="Pippin"
+            assignee_last_name="Sackville-Baggins"
+            completed=false
+            can_edit=true
+        }}
+        {{>list_task
+            pk="a76e9fac-f8ca-45ca-ae57-063459443ff0"
+            summary="Flight at the ready room was the vision of alignment, empowered to a quirky vogon."
+            description="The particle is more creature now than transformator. virtual and rudely lunar.
+            starlight travel at the ready room was the powerdrain of faith, evacuated to a most unusual moon.
+            courage at the alpha quadrant was the ionic cannon of tragedy, invaded to a modern space suit.
+            The seismic admiral patiently fights the proton?"
+            assignee_image="https://i.pravatar.cc/?u=TobyMugwort@armyspy.com"
+            assignee_first_name="Toby"
+            assignee_last_name="Mugwort"
+            completed=true
+            can_edit=true
+        }}
+        
+      
+    
+    
+  
+  | + + + +    {{assignee_first_name}} {{assignee_last_name}}
+
 | +    
+ +{{description}}+ | + +
+      {{#if completed}}
+         {{! TODO: patch-status ? }}
+      {{else}}
+         {{! TODO: patch-status? }}
+      {{/if}}
+      
+    + | 
diff --git a/webpack.config.js b/webpack.config.js
index 7423693..2087a21 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -30,8 +30,11 @@ module.exports = {
     plugins: [
         new MiniCSSExtractPlugin({filename:"css/main.min.css"}),
         new HTMLWebpackPlugin({
-            template: path.resolve(__dirname, "src/views/_template.hbs"),
-            filename: "index.html"
+            template: path.resolve(__dirname, "src/views/list_view.hbs"),
+            filename: "tasks/task_list.html",
+            templateParameters: {
+                title: "Tasks List",
+            }
         })
     ],
     module: {