diff --git a/ui/src/components/list-item.ts b/ui/src/components/list-item.ts
index 3a5ae44..09cdc0d 100644
--- a/ui/src/components/list-item.ts
+++ b/ui/src/components/list-item.ts
@@ -36,7 +36,10 @@ export class ListItem extends NHComponent {
             .list-item.selected {
                 background: rgb(110, 70, 204);
             }
-            .list-item:hover {
+            .list-item.selected:hover {
+                cursor: initial;
+            }
+            .list-item:not(.selected):hover {
                 background: rgba(110, 70, 204, 0.5);
             }
             .list-item {
@@ -49,6 +52,8 @@ export class ListItem extends NHComponent {
                 padding: 8px 16px;
                 box-sizing: border-box;
                 align-items: center;
+                display: flex;
+                flex: 1;
             }
         `,
     ];
diff --git a/ui/src/components/task-item.ts b/ui/src/components/task-item.ts
index dd33305..cfa7c7f 100644
--- a/ui/src/components/task-item.ts
+++ b/ui/src/components/task-item.ts
@@ -1,57 +1,31 @@
 import { property, state } from "lit/decorators.js";
-import { ScopedRegistryHost } from "@lit-labs/scoped-registry-mixin";
-import { LitElement, html, css } from "lit";
+import { html, css, CSSResult } from "lit";
 import { Task, WrappedEntry } from "../types";
-import { Checkbox, ListItem, CheckListItem } from '@scoped-elements/material-web'
 import { TodoStore } from "../todo-store";
-import { variables } from "../styles/variables";
+import { NHCheckbox, NHComponent } from "@neighbourhoods/design-system-components";
 
-export class TaskItem extends ScopedRegistryHost(LitElement) {
-    @property()
-    public todoStore!: TodoStore
+export class TaskItem extends NHComponent {
+    @property() todoStore!: TodoStore
 
-    @property()
-    completed: boolean = false
-
-    @property()
-    @state()
-    task!: WrappedEntry<Task>
-
-    static get styles() {
-        return [
-            variables,
-            css`
-              .task-item-container {
-                display: flex;
-                flex-direction: row;
-                color: var(--nh-theme-fg-default);
-                flex: 1;
-                background-color: var(--nh-theme-bg-surface);
-                border-radius: var(--border-r-tiny);
-                margin: 4px;
-                font-size: 16px;
-              }
-              .check-list-item {
-                color: var(--nh-theme-fg-default);
-                width: 100%;
-              }`
-        ]
-    }
+    @state() task!: WrappedEntry<Task>
 
     render() {
-        // console.log(this.completed)
         return html`
             <div class="task-item-container">
-                <input type="checkbox" class="check-list-item"
-                    checked=${this.completed}
+                <nh-checkbox
+                    .size=${"auto"}
+                    .label=${""}
+                    name=${"task-item"}
+                    class="check-list-item"
                     @click=${this.dispatchTaskToggle}
                 >
-                </input>
+                </nh-checkbox>
 
-                <label>${this.task.entry.description}</label>
+                <label for="task-item">${this.task.entry.description}</label>
             </div>
         `
     }
+
     dispatchTaskToggle() {
         this.dispatchEvent(new CustomEvent('task-toggle'))
     }
@@ -60,11 +34,42 @@ export class TaskItem extends ScopedRegistryHost(LitElement) {
         await this.todoStore.toggleTaskStatus(this.task)
     }
 
-    static get elementDefinitions() {
-        return {
-            'mwc-checkbox': Checkbox,
-            'mwc-list-item': ListItem,
-            // 'nh-checkbox': NHCheckbox,
-        }
+    static elementDefinitions = {
+        'nh-checkbox': NHCheckbox,
     }
+
+    static styles: CSSResult[] = [
+        super.styles as CSSResult,
+        css`
+            :host {
+                display: flex;
+                height: 2rem;
+            }
+
+            .task-item-container {
+                display: flex;
+                flex: 1;
+                font-size: 16px;
+                color: #fff;
+                background-color: var(--nh-theme-bg-surface);
+                border-radius: 8px;
+                margin: 0;
+                align-items: center;
+                height: 100%;
+                padding: 8px;
+                box-sizing: border-box;
+                justify-content: flex-start;
+                display: flex;
+            }
+            .check-list-item, nh-checkbox {
+                display: flex;
+                flex: 1 1 0%;
+                flex: initial;
+            }
+            nh-checkbox {
+                width: 3rem;
+                margin-right: 8px;
+            }
+        `
+    ]
 }
diff --git a/ui/src/components/task-list.ts b/ui/src/components/task-list.ts
index 39bdc2f..816d888 100644
--- a/ui/src/components/task-list.ts
+++ b/ui/src/components/task-list.ts
@@ -1,100 +1,49 @@
-import { property, state } from "lit/decorators.js";
-import { ScopedRegistryHost } from "@lit-labs/scoped-registry-mixin";
-import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { html } from "lit";
 import { TaskItem } from "./task-item";
 import { TodoStore } from "../todo-store";
-import { get } from "svelte/store";
-import { List } from '@scoped-elements/material-web'
 import { SensemakerStore } from "@neighbourhoods/client";
-import { SensemakeResource } from "./sensemaker/sensemake-resource";
 import { StoreSubscriber } from "lit-svelte-stores";
 import {repeat} from 'lit/directives/repeat.js';
-import { variables } from "../styles/variables";
-import { getHashesFromResourceDefNames } from "../utils";
-import { decodeHashFromBase64 } from "@holochain/client";
+import { NHComponent } from "@neighbourhoods/design-system-components";
 
-// add item at the bottom
-export class TaskList extends ScopedRegistryHost(LitElement) {
+export class TaskList extends NHComponent {
+    @property() todoStore!: TodoStore
+    @property() sensemakerStore!: SensemakerStore
+    @property() listName: string | undefined
 
-    @property()
-    public todoStore!: TodoStore
-
-    @property()
-    public sensemakerStore!: SensemakerStore
-
-    @property()
-    listName: string | undefined
-
-    @state()
-    tasks = html``
-
-    /**
-     * component subscribers
-     */
-    listTasks = new StoreSubscriber(this, () => this.todoStore.getTasks(this.listName!));
-    // not sure if I can use a reactive value in the subscriber callback
-    // listTasksAssessments = new StoreSubscriber(this, () => this.sensemakerStore.resourceAssessments(this.listTasks.value.map((task) => encodeHashToBase64(task.entry_hash))));
+    listTasks = new StoreSubscriber(this as any, () => this.todoStore.getTasks(this.listName!));
 
     render() {
-        this.updateTaskList()
-
         if (this.listName) {
             return html`
-                <div class="task-list-container">
-                    <mwc-list>
-                        ${this.tasks}
-                    </mwc-list>
+                <div class="task-list-container" style="display: flex; flex-direction: column; gap: 8px; margin-top: 8px;">
+                    ${this.renderTaskList()}
                 </div>
             `
         }
-        else {
-            return html`
-                <div>select a list!</div>
-            `
-        }
     }
-    // TODO: update this function name to be more descriptive/accurate
-    updateTaskList() {
+
+    renderTaskList() {
         if (this.listName) {
             const tasks = this.listTasks.value;
-            console.log('tasks subscribed', tasks)
-            this.tasks = html`
-            ${tasks.length > 0 ? repeat(tasks, (task) => task.entry_hash, (task, index) => {
-                return html`
-                <sensemake-resource
-                    .resourceEh=${task.entry_hash}
-                    .resourceDefEh=${decodeHashFromBase64(getHashesFromResourceDefNames(["task_item"], get(this.sensemakerStore.resourceDefinitions))[0])}
-                >
-                    <task-item
-                        .task=${task}
-                        .todoStore=${this.todoStore}
-                        .completed=${('Complete' in task.entry.status)}
-                        @task-toggle=${() => this.todoStore.toggleTaskStatus(task)}
-                    ></task-item>
-                </sensemake-resource>
-            `}) : html``}
+            
+            return html`
+                ${tasks.length > 0 ? repeat(tasks, (task) => task.entry_hash, (task, _idx) => {
+                    return html`
+                        <task-item
+                            .task=${task}
+                            .todoStore=${this.todoStore}
+                            .completed=${('Complete' in task.entry.status)}
+                            @task-toggle=${() => this.todoStore.toggleTaskStatus(task)}
+                        ></task-item>
+                    `
+                }) : null}
             `
         }
     }
-    static get styles() {
-        return [
-        variables,
-        css`
-        mwc-list {
-            position: relative;
-        }
-        add-item {
-        }
-        task-list-container {
-            height: 100vh;
-        }
-    `]
-    }
-    static get elementDefinitions() {
-        return {
+
+    static elementDefinitions = {
         'task-item': TaskItem,
-        'mwc-list': List,
-        'sensemake-resource': SensemakeResource,
-        };
-    }
+    };
 }
diff --git a/ui/src/todo-app.ts b/ui/src/todo-app.ts
index 9b0cb39..c7314d7 100644
--- a/ui/src/todo-app.ts
+++ b/ui/src/todo-app.ts
@@ -25,7 +25,7 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) implements NHDelega
   @state() activeList: string | undefined;
   @state() activeContext: string | undefined;
 
-  lists: StoreSubscriber<string[]> = new StoreSubscriber(this, () =>
+  lists: StoreSubscriber<string[]> = new StoreSubscriber(this as any, () =>
     this.todoStore.getLists(), () => [this.activeList]
   );
 
@@ -56,16 +56,8 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) implements NHDelega
     }
   };
 
-  render() {
-    const taskList = html`
-      <div class="task-list-header">${this.activeList || 'Create/select a list!'}</div>
-      <task-list
-        .listName=${this.activeList}
-        .todoStore=${this.todoStore}
-        .sensemakerStore=${this.sensemakerStore}
-      ></task-list>
-    `;
-
+  renderContextResults() {
+    
     // const contextResult = html`
     //   <div class="task-list-header">${this.activeContext}</div>
     //   <context-view
@@ -75,41 +67,68 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) implements NHDelega
     //   ></context-view>
     // `;
 
+  }
+
+  renderContextsList() {
+    return html`
+      <h2>Contexts</h2>
+      <nh-context-selector
+        id="select-context"
+        .sensemakerStore=${this.sensemakerStore}
+        .selectedAppletInstanceId=${this.nhDelegate.appInfo.installed_app_id}
+        .selectedContextEhB64=${'this.selectedContextEhB64'}
+      >
+      </nh-context-selector>
+    `
+  }
+
+  renderListsList() {
+    return html`
+      <h1>Lists</h1>
+      <ul class="list-list-container" @list-selected=${this.updateActiveList}>
+        ${this.lists?.value 
+          ? repeat(this.lists.value, (_) => +(new Date()), (list, _idx) => {
+              return html`
+                <list-item
+                  class="todo-list-list-item"
+                  .selected=${this.activeList == list}
+                  listName=${list}
+                ></list-item>
+            `
+          })
+          : null
+        }
+      </ul>
+    `
+  }
+
+  renderTaskList() {
+    return html`
+      <div>
+        <div class="task-list-header">${this.activeList || 'Create/select a list!'}</div>
+        <task-list
+          .listName=${this.activeList}
+          .todoStore=${this.todoStore}
+          .sensemakerStore=${this.sensemakerStore}
+        ></task-list>
+      </div>
+    `
+  }
+
+  render() {
     return html`
       <main class="layout">
         <div class="left-col">
           <div class="container">
-            <h1>Lists</h1>
-            <ul class="list-list-container" @list-selected=${this.updateActiveList}>
-              ${this.lists?.value 
-                ? repeat(this.lists.value, (_) => +(new Date()), (list, index) => {
-                    return html`
-                      <list-item
-                        class="todo-list-list-item"
-                        .selected=${this.activeList == list}
-                        listName=${list}
-                      ></list-item>
-                  `
-                })
-                : null
-              }
-            </ul>
-
-            <h2>Contexts</h2>
-            <nh-context-selector
-              id="select-context"
-              .sensemakerStore=${this.sensemakerStore}
-              .selectedAppletInstanceId=${this.nhDelegate.appInfo.installed_app_id}
-              .selectedContextEhB64=${'this.selectedContextEhB64'}
-            >
-            </nh-context-selector>
+            ${this.renderListsList()}
+            ${this.renderContextsList()}
           </div>
           <div>
             <add-item itemType="list" @new-item=${this.addNewList}></add-item>
           </div>
         </div>
         <div class="right-col">
-          ${this.activeContext ? null : taskList}
+          ${this.activeContext ? this.renderContextResults() : this.renderTaskList()}
           <add-item itemType="task" @new-item=${this.addNewTask}></add-item>
         </div>
       </main>
@@ -122,18 +141,14 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) implements NHDelega
     this.activeContext = undefined;
   }
   async addNewTask(e: CustomEvent) {
-    console.log('adding new item', e.detail.newValue);
     const createdTask = await this.todoStore.addTaskToList({
       task_description: e.detail.newValue,
       list: this.activeList!,
     });
-    const options = {
-      detail: { hash: createdTask.entry_hash },
-      bubbles: true,
-      composed: true,
-    };
-    this.dispatchEvent(new CustomEvent('task-hash-created', options));
+    const options = { detail: { hash: createdTask.entry_hash }, bubbles: true, composed: true, };
+    (this as any).dispatchEvent(new CustomEvent('task-hash-created', options));
   }
+
   // handle the @list-selected event from the list-list component
   updateActiveList(e: CustomEvent) {
     this.activeList = e.detail.selectedList;
@@ -191,6 +206,11 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) implements NHDelega
       .right-col {
         grid-column: 2/-1;
       }
+      .right-col > div {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+      }
 
       .container {
         display: flex;
@@ -207,6 +227,7 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) implements NHDelega
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
+        gap: 8px;
       }
 
       .task-list-header {