diff --git a/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts b/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
index 07c2e305f1..f8f8ea7da7 100644
--- a/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
+++ b/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
@@ -13,6 +13,7 @@ export type DndItem = Record<string, any>;
 
 export interface DndKanbanBoardArgs<DndColumn> {
   columns: DndColumn[];
+  displayCard?: (card: DndItem) => boolean;
   isLoading?: boolean;
   onMove?: (
     draggedCard: DndItem,
@@ -153,6 +154,14 @@ export default class DndKanbanBoard extends Component<
     this.draggedCard = null;
   }
 
+  @action
+  displayCard(card: DndItem): boolean {
+    if (this.args.displayCard) {
+      return this.args.displayCard(card);
+    }
+    return true;
+  }
+
   <template>
     {{#if this.areModifiersLoaded}}
       <div class='draggable-container' {{on 'dragend' this.onDragEnd}}>
@@ -173,29 +182,31 @@ export default class DndKanbanBoard extends Component<
 
             <div class='column-drop-zone'>
               {{#each column.cards as |card|}}
-                <div
-                  class='draggable-card {{if @isLoading "is-loading"}}'
-                  {{this.DndSortableItemModifier
-                    group='cards'
-                    data=(hash item=card parent=column)
-                    onDrop=this.moveCard
-                    isOnTargetClass='is-on-target'
-                    onDragStart=(fn this.onDragStart card)
-                  }}
-                >
-                  {{#if (and @isLoading (eq card this.draggedCard))}}
-                    <div class='overlay'></div>
-                    {{yield card column to='card'}}
-                    <LoadingIndicator
-                      width='18'
-                      height='18'
-                      @color='var(--boxel-light)'
-                      class='loader'
-                    />
-                  {{else}}
-                    {{yield card column to='card'}}
-                  {{/if}}
-                </div>
+                {{#if (this.displayCard card)}}
+                  <div
+                    class='draggable-card {{if @isLoading "is-loading"}}'
+                    {{this.DndSortableItemModifier
+                      group='cards'
+                      data=(hash item=card parent=column)
+                      onDrop=this.moveCard
+                      isOnTargetClass='is-on-target'
+                      onDragStart=(fn this.onDragStart card)
+                    }}
+                  >
+                    {{#if (and @isLoading (eq card this.draggedCard))}}
+                      <div class='overlay'></div>
+                      {{yield card column to='card'}}
+                      <LoadingIndicator
+                        width='18'
+                        height='18'
+                        @color='var(--boxel-light)'
+                        class='loader'
+                      />
+                    {{else}}
+                      {{yield card column to='card'}}
+                    {{/if}}
+                  </div>
+                {{/if}}
               {{/each}}
             </div>
           </div>
diff --git a/packages/experiments-realm/productivity/filter-dropdown.gts b/packages/experiments-realm/productivity/filter-dropdown.gts
index 452ca8c25f..a572a0fc48 100644
--- a/packages/experiments-realm/productivity/filter-dropdown.gts
+++ b/packages/experiments-realm/productivity/filter-dropdown.gts
@@ -11,6 +11,7 @@ interface FilterDropdownSignature {
     selected: any;
     onChange: (value: any) => void;
     onClose: () => boolean | undefined;
+    isLoading?: boolean;
   };
   Blocks: {
     default: [any];
@@ -24,7 +25,7 @@ export class FilterDropdown extends GlimmerComponent<FilterDropdownSignature> {
       @options={{@options}}
       @selected={{@selected}}
       @onChange={{@onChange}}
-      @triggerComponent={{FilterTrigger}}
+      @triggerComponent={{(component FilterTrigger isLoading=@isLoading)}}
       @initiallyOpened={{true}}
       @searchEnabled={{true}}
       @searchField={{@searchField}}
diff --git a/packages/experiments-realm/productivity/filter-trigger.gts b/packages/experiments-realm/productivity/filter-trigger.gts
index dc4072b66c..4f921e1602 100644
--- a/packages/experiments-realm/productivity/filter-trigger.gts
+++ b/packages/experiments-realm/productivity/filter-trigger.gts
@@ -1,8 +1,11 @@
 import GlimmerComponent from '@glimmer/component';
 import { IconButton } from '@cardstack/boxel-ui/components';
 import ListFilter from '@cardstack/boxel-icons/list-filter';
+
 interface TriggerSignature {
-  Args: {};
+  Args: {
+    isLoading?: boolean;
+  };
   Element: HTMLDivElement;
 }
 
@@ -10,7 +13,13 @@ export class FilterTrigger extends GlimmerComponent<TriggerSignature> {
   <template>
     <div class='filter-trigger'>
       <IconButton @icon={{ListFilter}} width='13px' height='13px' />
-      <span class='filter-trigger-text'>Filter</span>
+      <span class='filter-trigger-text'>
+        {{#if @isLoading}}
+          Loading...
+        {{else}}
+          Filter
+        {{/if}}
+      </span>
     </div>
 
     <style scoped>
diff --git a/packages/experiments-realm/productivity/task-cards-resource.gts b/packages/experiments-realm/productivity/task-cards-resource.gts
index 8c0fb4b8a5..fa57bbc5b0 100644
--- a/packages/experiments-realm/productivity/task-cards-resource.gts
+++ b/packages/experiments-realm/productivity/task-cards-resource.gts
@@ -1,118 +1,71 @@
-import { getCards } from '@cardstack/runtime-common';
 import { tracked } from '@glimmer/tracking';
-import { DndColumn, DndItem } from '@cardstack/boxel-ui/components';
-import { type Query } from '@cardstack/runtime-common';
-import { restartableTask } from 'ember-concurrency';
-import { TaskStatusField, Task } from './task';
-import type { LooseyGooseyData } from '../loosey-goosey';
+import { DndColumn } from '@cardstack/boxel-ui/components';
+import { CardDef } from 'https://cardstack.com/base/card-api';
 
-import { isEqual } from 'lodash';
 import { Resource } from 'ember-resources';
 
 interface Args {
   named: {
-    query: Query | undefined;
-    realm: string;
+    cards: CardDef[];
+    hasColumnKey: (card: any, key: string) => boolean;
+    columnKeys: string[];
   };
 }
 
-// This is a resource because we have to consider 3 data mechanism
-// 1. the reactivity of the query. Changes in query should trigger server fetch
-// 2. the drag and drop of cards. When dragging and dropping, we should NOT trigger a server fetch
-//    but rather just update the local data structure
-// 3. When we trigger a server fetch, we need to maintain the sort order of the cards.
-//   Currently, we don't have any mechanism to maintain the sort order but this is good enough for now
+// This is a resource because we have to
+// 1. to hold state of cards inside of the kanban board
+// 2. to order cards that are newly added to the kanban board
 class TaskCollection extends Resource<Args> {
   @tracked private data: Map<string, DndColumn> = new Map();
-  @tracked private order: Map<string, string[]> = new Map();
-  @tracked private query: Query | undefined = undefined;
+  hasColumnKey?: (card: CardDef, key: string) => boolean = undefined;
 
-  private run = restartableTask(async (query: Query, realm: string) => {
-    let staticQuery = getCards(query, [realm]);
-    await staticQuery.loaded;
-    let cards = staticQuery.instances as Task[];
-    this.commit(cards); //update stale data
+  commit(cards: CardDef[], columnKeys: string[]) {
+    columnKeys.forEach((key: string) => {
+      let currentColumn = this.data.get(key);
+      let cardsForStatus = cards.filter((card) => {
+        return this.hasColumnKey ? this.hasColumnKey(card, key) : false;
+      });
 
-    this.query = query;
-  });
-
-  queryHasChanged(query: Query) {
-    return !isEqual(this.query, query);
-  }
-
-  commit(cards: Task[]) {
-    TaskStatusField.values?.map((status: LooseyGooseyData) => {
-      let statusLabel = status.label;
-      let cardIdsFromOrder = this.order.get(statusLabel);
-      let newCards: Task[] = [];
-      if (cardIdsFromOrder) {
-        newCards = cardIdsFromOrder.reduce((acc: Task[], id: string) => {
-          let card = cards.find((c) => c.id === id);
-          if (card) {
-            acc.push(card);
-          }
-          return acc;
-        }, []);
+      if (currentColumn) {
+        // Maintain order of existing cards and append new ones
+        let existingCardIds = new Set(
+          currentColumn.cards.map((card: CardDef) => card.id),
+        );
+        let existingCards = currentColumn.cards.filter((card: CardDef) =>
+          cardsForStatus.some((c) => c.id === card.id),
+        );
+        let newCards = cardsForStatus.filter(
+          (card: CardDef) => !existingCardIds.has(card.id),
+        );
+        this.data.set(key, new DndColumn(key, [...newCards, ...existingCards]));
       } else {
-        newCards = cards.filter((task) => task.status.label === statusLabel);
+        // First time loading this column
+        this.data.set(key, new DndColumn(key, cardsForStatus));
       }
-      this.data.set(statusLabel, new DndColumn(statusLabel, newCards));
     });
   }
 
-  // Note:
-  // sourceColumnAfterDrag & targetColumnAfterDrag is the column state after the drag and drop
-  update(
-    draggedCard: DndItem,
-    _targetCard: DndItem | undefined,
-    sourceColumnAfterDrag: DndColumn,
-    targetColumnAfterDrag: DndColumn,
-  ) {
-    let status = TaskStatusField.values.find(
-      (value) => value.label === targetColumnAfterDrag.title,
-    );
-    let cardInNewCol = targetColumnAfterDrag.cards.find(
-      (c: Task) => c.id === draggedCard.id,
-    );
-    if (cardInNewCol) {
-      cardInNewCol.status.label = status?.label;
-      cardInNewCol.status.index = status?.index;
-    }
-    //update the order of the cards in the column
-    this.order.set(
-      sourceColumnAfterDrag.title,
-      sourceColumnAfterDrag.cards.map((c: Task) => c.id),
-    );
-    this.order.set(
-      targetColumnAfterDrag.title,
-      targetColumnAfterDrag.cards.map((c: Task) => c.id),
-    );
-    return cardInNewCol;
-  }
-
   get columns() {
     return Array.from(this.data.values());
   }
 
   modify(_positional: never[], named: Args['named']) {
-    if (
-      named.query &&
-      (this.query === undefined || this.queryHasChanged(named.query))
-    ) {
-      this.run.perform(named.query, named.realm);
-    }
+    this.hasColumnKey = named.hasColumnKey;
+    this.commit(named.cards, named.columnKeys);
   }
 }
 
 export default function getTaskCardsResource(
   parent: object,
-  query: () => Query | undefined,
-  realm: () => string,
+  cards: () => CardDef[],
+  columnKeys: () => string[],
+  hasColumnKey: () => (card: any, key: string) => boolean,
 ) {
   return TaskCollection.from(parent, () => ({
     named: {
-      realm: realm(),
-      query: query(),
+      cards: cards(),
+      columnKeys: columnKeys(),
+      hasColumnKey: hasColumnKey(),
     },
   }));
 }
diff --git a/packages/experiments-realm/productivity/task.gts b/packages/experiments-realm/productivity/task.gts
index d90d76b3bb..d255ab8796 100644
--- a/packages/experiments-realm/productivity/task.gts
+++ b/packages/experiments-realm/productivity/task.gts
@@ -205,8 +205,8 @@ class TaskIsolated extends Component<typeof Task> {
         </div>
 
         <div class='right-column'>
-          <div class='assignees'>
-            <h4>Assignees</h4>
+          <div class='assignee'>
+            <h4>Assignee</h4>
 
             {{#if @model.assignee}}
               <@fields.assignee
diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index 2a8928c506..a2f5902766 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -1,8 +1,6 @@
 import {
   Component,
   realmURL,
-  StringField,
-  contains,
   field,
   BaseDef,
   CardDef,
@@ -12,7 +10,11 @@ import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { TrackedMap } from 'tracked-built-ins';
 import GlimmerComponent from '@glimmer/component';
-import { DndItem, LoadingIndicator } from '@cardstack/boxel-ui/components';
+import {
+  BoxelButton,
+  DndItem,
+  LoadingIndicator,
+} from '@cardstack/boxel-ui/components';
 import {
   DndKanbanBoard,
   DndColumn,
@@ -24,7 +26,7 @@ import { LooseSingleCardDocument, getCards } from '@cardstack/runtime-common';
 import { restartableTask } from 'ember-concurrency';
 // @ts-expect-error path resolution issue
 import { AppCard } from '/experiments/app-card';
-import { TaskStatusField, Project } from './productivity/task';
+import { TaskStatusField, Project, Task } from './productivity/task';
 import { FilterDropdown } from './productivity/filter-dropdown';
 import { StatusPill } from './productivity/filter-dropdown-item';
 import { FilterTrigger } from './productivity/filter-trigger';
@@ -54,16 +56,6 @@ export interface SelectedItem {
 class WorkTrackerIsolated extends Component<typeof AppCard> {
   @tracked loadingColumnKey: string | undefined;
   @tracked selectedFilter: FilterType | undefined;
-  private declare assigneeQuery: {
-    instances: CardDef[];
-    isLoading: boolean;
-    loaded: Promise<void>;
-  };
-  private declare projectQuery: {
-    instances: CardDef[];
-    isLoading: boolean;
-    loaded: Promise<void>;
-  };
   filters = {
     status: {
       searchKey: 'label',
@@ -87,56 +79,62 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
   selectedItems = new TrackedMap<FilterType, SelectedItem[]>();
   constructor(owner: Owner, args: any) {
     super(owner, args);
-    this.initializeDropdownData.perform();
   }
 
   get filterTypes() {
     return Object.keys(this.filters) as FilterType[];
   }
 
-  taskCollection = getTaskCardsResource(
-    this,
-    () => this.getTaskQuery,
-    () => this.realmHref,
-  );
+  cards = getCards(this.getTaskQuery, this.realmHrefs, { isLive: true });
 
-  initializeDropdownData = restartableTask(async () => {
-    this.assigneeQuery = getCards(
-      {
-        filter: {
-          type: this.filters.assignee.codeRef,
-        },
+  assigneeQuery = getCards(
+    {
+      filter: {
+        type: this.filters.assignee.codeRef,
       },
-      this.realmHrefs,
-    );
+    },
+    this.realmHrefs,
+    { isLive: true },
+  );
 
-    await this.assigneeQuery.loaded;
-  });
+  get cardInstances() {
+    if (!this.cards || !this.cards.instances) {
+      return [];
+    }
+    return this.cards.instances as Task[];
+  }
 
   get assigneeCards() {
     return this.assigneeQuery.instances;
   }
 
-  filterObject(filterType: FilterType) {
-    let selectedItems = this.selectedItems.get(filterType) ?? [];
-    return selectedItems.map((item) => {
-      if (filterType === 'status') {
-        return {
-          eq: {
-            'status.label': item.label,
-          },
-        };
-      } else {
-        let key = filterType + '.name';
-        return {
-          eq: {
-            [key]: item.name,
-          },
-        };
-      }
+  @action showTaskCard(card: Task): boolean {
+    return this.filterTypes.every((filterType: FilterType) => {
+      let selectedItems = this.selectedItems.get(filterType) ?? [];
+      if (selectedItems.length === 0) return true;
+      return selectedItems.some((item) => {
+        if (filterType === 'status') {
+          return card.status?.label === item.label;
+        } else if (filterType === 'assignee') {
+          return card.assignee?.name === item.name;
+        } else {
+          return false;
+        }
+      });
     });
   }
 
+  hasColumnKey = (card: Task, key: string) => {
+    return card.status?.label === key;
+  };
+
+  taskCollection = getTaskCardsResource(
+    this,
+    () => this.cardInstances,
+    () => TaskStatusField.values.map((status) => status.label) ?? [],
+    () => this.hasColumnKey,
+  );
+
   get selectedFilterConfig() {
     if (this.selectedFilter === undefined) {
       return undefined;
@@ -174,25 +172,17 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     return this.args.model.project;
   }
 
-  get getTaskQuery(): Query | undefined {
+  get getTaskQuery(): Query {
     let everyArr: (AnyFilter | CardTypeFilter | EqFilter)[] = [];
     if (!this.realmURL) {
       throw new Error('No realm url');
     }
     if (!this.currentProject || !this.currentProject.id) {
       console.log('No project');
-      return;
+      everyArr.push({ eq: { 'project.id': null } });
+    } else {
+      everyArr.push({ eq: { 'project.id': this.currentProject.id } });
     }
-    everyArr.push({ eq: { 'project.id': this.currentProject.id } });
-    this.filterTypes.forEach((filterType) => {
-      let anyFilter = this.filterObject(filterType);
-      if (anyFilter.length > 0) {
-        everyArr.push({
-          any: anyFilter,
-        } as AnyFilter);
-      }
-    });
-
     return (
       everyArr.length > 0
         ? {
@@ -290,18 +280,20 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
 
   @action async onMoveCardMutation(
     draggedCard: DndItem,
-    targetCard: DndItem | undefined,
-    sourceColumnAfterDrag: DndColumn,
+    _targetCard: DndItem | undefined,
+    _sourceColumnAfterDrag: DndColumn,
     targetColumnAfterDrag: DndColumn,
   ) {
-    let updatedCard = this.taskCollection.update(
-      draggedCard,
-      targetCard,
-      sourceColumnAfterDrag,
-      targetColumnAfterDrag,
+    let cardInNewCol = targetColumnAfterDrag.cards.find(
+      (c: CardDef) => c.id === draggedCard.id,
     );
-    //TODO: save the card!
-    await this.args.context?.actions?.saveCard?.(updatedCard);
+    if (cardInNewCol) {
+      let statusValue = TaskStatusField.values.find(
+        (value) => value.label === targetColumnAfterDrag.title,
+      );
+      cardInNewCol.status = new TaskStatusField(statusValue);
+      await this.args.context?.actions?.saveCard?.(cardInNewCol);
+    }
   }
 
   @action onSelectFilter(item: FilterType) {
@@ -356,11 +348,27 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     }
   }
 
+  get assigneeIsLoading() {
+    return (
+      this.selectedFilter === 'assignee' &&
+      this.assigneeQuery &&
+      this.assigneeQuery.isLoading
+    );
+  }
+
+  @action viewCard() {
+    this.args.context?.actions?.viewCard?.(new URL(this.args.model.id), 'edit');
+  }
+
   <template>
     <div class='task-app'>
       {{#if (not this.currentProject.id)}}
         <div class='disabled'>
-          Link a project to continue
+          {{#if @context.actions.viewCard}}
+            <BoxelButton @kind='primary' {{on 'click' this.viewCard}}>
+              Link a project to continue
+            </BoxelButton>
+          {{/if}}
         </div>
       {{/if}}
       <div class='filter-section'>
@@ -368,6 +376,7 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
           {{#if this.selectedFilterConfig}}
             {{#let (this.selectedFilterConfig.options) as |options|}}
               <FilterDropdown
+                @isLoading={{this.assigneeIsLoading}}
                 @searchField={{this.selectedFilterConfig.searchKey}}
                 @options={{options}}
                 @realmURLs={{this.realmHrefs}}
@@ -434,6 +443,7 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
         <DndKanbanBoard
           @columns={{this.taskCollection.columns}}
           @onMove={{this.onMoveCardMutation}}
+          @displayCard={{this.showTaskCard}}
         >
           <:header as |column|>
             <ColumnHeader
@@ -457,7 +467,6 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
                 <CardComponent class='card' />
               </div>
             {{/let}}
-
           </:card>
         </DndKanbanBoard>
       </div>
@@ -621,11 +630,6 @@ export class WorkTracker extends AppCard {
   static prefersWideFormat = true;
   static isolated = WorkTrackerIsolated;
   @field project = linksTo(() => Project);
-  @field title = contains(StringField, {
-    computeVia: function (this: WorkTracker) {
-      return 'Work Tracker';
-    },
-  });
 }
 
 function removeFileExtension(cardUrl: string) {