diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 775b3295835d..1a7897144757 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -54,7 +54,7 @@ jobs:
           npm ci -D --prefix src/dispatch/static/dispatch
           npm install -D @playwright/test
       - name: Install playwright browsers
-        run: npx playwright install --with-deps
+        run: npx playwright install --with-deps chromium
       - name: Setup sample database
         run: dispatch database restore --dump-file data/dispatch-sample-data.dump && dispatch database upgrade
       - name: Run tests
diff --git a/requirements-dev.txt b/requirements-dev.txt
index 3f00868d8b5f..267a48327cc2 100644
--- a/requirements-dev.txt
+++ b/requirements-dev.txt
@@ -86,7 +86,7 @@ python-dateutil==2.8.2
     # via faker
 pyyaml==6.0.1
     # via pre-commit
-ruff==0.1.6
+ruff==0.1.7
     # via -r requirements-dev.in
 six==1.16.0
     # via
diff --git a/src/dispatch/case/messaging.py b/src/dispatch/case/messaging.py
index 48f377b28191..ae9d54a02a15 100644
--- a/src/dispatch/case/messaging.py
+++ b/src/dispatch/case/messaging.py
@@ -37,7 +37,7 @@ def send_case_close_reminder(case: Case, db_session: SessionLocal):
     items = [
         {
             "name": case.name,
-            "dispatch_ui_case_url": f"{DISPATCH_UI_URL}/{case.project.organization.name}/cases/{case.id}",  # noqa
+            "dispatch_ui_case_url": f"{DISPATCH_UI_URL}/{case.project.organization.name}/cases/{case.name}",  # noqa
             "title": case.title,
             "status": case.status,
         }
@@ -77,7 +77,7 @@ def send_case_triage_reminder(case: Case, db_session: SessionLocal):
             "name": case.name,
             "title": case.title,
             "status": case.status,
-            "dispatch_ui_case_url": f"{DISPATCH_UI_URL}/{case.project.organization.name}/cases/{case.id}",  # noqa
+            "dispatch_ui_case_url": f"{DISPATCH_UI_URL}/{case.project.organization.name}/cases/{case.name}",  # noqa
         }
     ]
 
diff --git a/src/dispatch/conversation/flows.py b/src/dispatch/conversation/flows.py
index dadba50ff470..f7f175a84012 100644
--- a/src/dispatch/conversation/flows.py
+++ b/src/dispatch/conversation/flows.py
@@ -36,6 +36,8 @@ def create_case_conversation(case: Case, conversation_target: str, db_session: S
     if not conversation_target:
         conversation_target = case.case_type.conversation_target
 
+    conversation = None
+
     if conversation_target:
         try:
             conversation = plugin.instance.create_threaded(
diff --git a/src/dispatch/plugins/dispatch_slack/case/messages.py b/src/dispatch/plugins/dispatch_slack/case/messages.py
index 76a52b52e83a..9163f6d57644 100644
--- a/src/dispatch/plugins/dispatch_slack/case/messages.py
+++ b/src/dispatch/plugins/dispatch_slack/case/messages.py
@@ -78,7 +78,7 @@ def create_case_message(case: Case, channel_id: str) -> list[Block]:
             accessory=Button(
                 text="View",
                 action_id="button-link",
-                url=f"{DISPATCH_UI_URL}/{case.project.organization.slug}/cases/{case.id}",
+                url=f"{DISPATCH_UI_URL}/{case.project.organization.slug}/cases/{case.name}",
             ),
         ),
         Section(text=f"*Description* \n {case.description}"),
diff --git a/src/dispatch/static/dispatch/package-lock.json b/src/dispatch/static/dispatch/package-lock.json
index ee808ae68d9a..14815334744f 100644
--- a/src/dispatch/static/dispatch/package-lock.json
+++ b/src/dispatch/static/dispatch/package-lock.json
@@ -6336,9 +6336,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
-      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
+      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
       "devOptional": true,
       "dependencies": {
         "esbuild": "^0.18.10",
diff --git a/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue b/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue
index 0cc7115f931c..f9277365039c 100644
--- a/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue
@@ -109,6 +109,7 @@ const handleResolutionUpdate = (newResolution) => {
           <v-col cols="10">
             <CasePrioritySearchPopover
               :case-priority="modelValue.case_priority?.name"
+              :project="modelValue.project?.name"
               class="pl-6"
             />
           </v-col>
@@ -121,6 +122,7 @@ const handleResolutionUpdate = (newResolution) => {
           <v-col cols="10">
             <CaseSeveritySearchPopover
               :case-severity="modelValue.case_severity?.name"
+              :project="modelValue.project?.name"
               class="pl-6"
             />
           </v-col>
@@ -131,7 +133,11 @@ const handleResolutionUpdate = (newResolution) => {
             <div class="dispatch-font">Type</div>
           </v-col>
           <v-col cols="10">
-            <CaseTypeSearchPopover :case-type="modelValue.case_type?.name" class="pl-6" />
+            <CaseTypeSearchPopover
+              :case-type="modelValue.case_type?.name"
+              :project="modelValue.project?.name"
+              class="pl-6"
+            />
           </v-col>
         </v-row>
 
diff --git a/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue b/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
index 1a2b9f1c000d..c0e549d8ce2f 100644
--- a/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
@@ -2,12 +2,12 @@
   <v-container>
     <v-row>
       <!-- Column for Data Table -->
-      <v-col cols="3">
-        <v-card min-width="350" class="signal-card" elevation="0">
+      <v-col cols="3" class="d-flex">
+        <v-card class="signal-card flex-card" elevation="0">
           <v-virtual-scroll :items="signalInstances" height="828" class="pt-2">
             <template #default="{ item }">
               <div class="d-flex align-center">
-                <span style="font-size: 0.8rem" class="pl-8">
+                <span class="pl-8 signal-name">
                   {{ item.signal.name }}
                 </span>
                 <span class="pl-1 dispatch-text-paragraph">
@@ -23,8 +23,8 @@
         </v-card>
       </v-col>
       <!-- Column for Raw Signal Viewer -->
-      <v-col cols="9">
-        <v-card elevation="0" class="signal-card pt-2">
+      <v-col cols="9" class="d-flex">
+        <v-card class="signal-card flex-card" elevation="0">
           <span class="dispatch-text-paragraph">
             <!-- {{ selectedItem.signal.name }} -->
           </span>
@@ -110,4 +110,17 @@ watch(
   border: 0.5px solid rgb(216, 216, 216) !important;
   border-radius: 8px !important;
 }
+
+.flex-card {
+  flex: 1;
+  min-width: 0; // Allow the card to shrink below its content size
+  overflow: hidden; // Clip the content and add ... if the content is too big
+}
+
+.signal-name {
+  font-size: 0.8rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue b/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
index 1f77a9e6e014..8c1f117c7d1c 100644
--- a/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
@@ -70,83 +70,107 @@
   </v-item-group>
 </template>
 
-<script>
-import { mapActions } from "vuex"
+<script setup>
+import { computed, watch, ref } from "vue"
+import { useStore } from "vuex"
+import { useSavingState } from "@/composables/useSavingState"
 import DTooltip from "@/components/DTooltip.vue"
+import CaseApi from "@/case/api"
 
-export default {
-  name: "CaseStatusSelectGroup",
-  props: {
-    modelValue: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: false,
+    default: () => ({}),
   },
-  components: {
-    DTooltip,
+})
+
+const store = useStore()
+const { setSaving } = useSavingState()
+let selectedStatus = ref(null)
+let dialogVisible = ref(false)
+let activeStatus = ref(props.modelValue.status)
+
+const statuses = computed(() => [
+  {
+    name: "New",
+    label: "Created",
+    color: "red",
+    hoverClass: "hover-card-three",
+    sheetClass: "rounded-s-xl arrow",
+    tooltip: props.modelValue.created_at,
   },
-  data() {
-    return {
-      selectedStatus: null,
-      dialogVisible: false,
-    }
+  {
+    name: "Triage",
+    label: "Triaged",
+    color: "red",
+    hoverClass: "hover-card-two",
+    sheetClass: "arrow",
+    tooltip: props.modelValue.triage_at,
   },
-  computed: {
-    statuses() {
-      return [
-        {
-          name: "New",
-          label: "New",
-          color: "red",
-          hoverClass: "hover-card-three",
-          sheetClass: "rounded-s-xl arrow",
-          tooltip: this.modelValue.created_at,
-        },
-        {
-          name: "Triage",
-          label: "Triaged",
-          color: "red",
-          hoverClass: "hover-card-two",
-          sheetClass: "arrow",
-          tooltip: this.modelValue.triage_at,
-        },
-        {
-          name: "Closed",
-          label: "Closed",
-          color: "green",
-          hoverClass: "hover-card",
-          sheetClass: "arrow",
-          tooltip: this.modelValue.closed_at,
-        },
-        {
-          name: "Escalated",
-          label: "Escalated",
-          color: "red",
-          hoverClass: "",
-          sheetClass: "rounded-e-xl end-sheet",
-          tooltip: this.modelValue.escalated_at,
-        },
-      ]
-    },
+  {
+    name: "Closed",
+    label: "Closed",
+    color: "green",
+    hoverClass: "hover-card",
+    sheetClass: "arrow",
+    tooltip: props.modelValue.closed_at,
   },
-  methods: {
-    ...mapActions("case_management", ["save_page"]),
-    changeStatus(newStatus) {
-      // eslint-disable-next-line vue/no-mutating-props
-      this.modelValue.status = newStatus
-      this.save_page()
-      this.dialogVisible = false
-      this.selectedStatus = null
-    },
-    openDialog(newStatus) {
-      this.selectedStatus = newStatus
-      this.dialogVisible = true
-    },
-    isActiveStatus(status) {
-      return this.modelValue.status === status
-    },
+  {
+    name: "Escalated",
+    label: "Escalated",
+    color: "red",
+    hoverClass: "",
+    sheetClass: "rounded-e-xl end-sheet",
+    tooltip: props.modelValue.escalated_at,
   },
+])
+
+const changeStatus = async (newStatus) => {
+  const caseDetails = store.state.case_management.selected
+  const previousStatus = activeStatus.value
+
+  // Optimistically update the UI
+  activeStatus.value = newStatus
+  selectedStatus.value = null
+  dialogVisible.value = false
+  caseDetails.status = newStatus
+
+  try {
+    setSaving(true)
+    await CaseApi.update(caseDetails.id, caseDetails)
+    setSaving(false)
+  } catch (e) {
+    console.error(`Failed to update case status`, e)
+
+    // If the API call fails, revert the active status change
+    activeStatus.value = previousStatus
+
+    store.commit(
+      "notification_backend/addBeNotification",
+      {
+        text: `Failed to update case status`,
+        type: "exception",
+      },
+      { root: true }
+    )
+  }
+}
+
+const openDialog = (newStatus) => {
+  selectedStatus.value = newStatus
+  dialogVisible.value = true
+}
+
+watch(
+  () => props.modelValue.status,
+  (newStatus) => {
+    activeStatus.value = newStatus
+  }
+)
+
+const isActiveStatus = (status) => {
+  return activeStatus.value === status
 }
 </script>
 
diff --git a/src/dispatch/static/dispatch/src/case/Page.vue b/src/dispatch/static/dispatch/src/case/Page.vue
index d0fc5e364105..e679c53718ec 100644
--- a/src/dispatch/static/dispatch/src/case/Page.vue
+++ b/src/dispatch/static/dispatch/src/case/Page.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <PageHeader
+      :case-id="caseDetails.id"
       :case-name="caseDetails.name"
       :case-visibility="caseDetails.visibility"
       :case-status="caseDetails.status"
@@ -92,21 +93,36 @@ const toggleDrawer = () => {
 }
 
 const fetchDetails = async () => {
-  const caseId = parseInt(route.params.id, 10)
+  const caseName = route.params.name
   loading.value = true
-  try {
-    // get the full data set
-    CaseApi.get(caseId).then((response) => {
-      caseDetails.value = response.data
 
-      // Save the fetched case details to the Vuex store
-      store.commit("case_management/SET_SELECTED", response.data)
-    })
-  } catch (e) {
-    console.error("Failed to fetch case details", e)
-    caseDetails.value = caseDefaults
+  CaseApi.getAll({
+    filter: JSON.stringify([
+      { and: [{ model: "Case", field: "name", op: "==", value: caseName }] },
+    ]),
+  }).then((response) => {
+    if (response.data.items.length) {
+      // get the full data set
+      return CaseApi.get(response.data.items[0].id).then((response) => {
+        caseDetails.value = response.data
+
+        // Save the fetched case details to the Vuex store
+        store.commit("case_management/SET_SELECTED", response.data)
+        loading.value = false
+      })
+    } else {
+      caseDetails.value = caseDefaults
+      store.commit(
+        "notification_backend/addBeNotification",
+        {
+          text: `Case '${caseName}' could not be found.`,
+          type: "exception",
+        },
+        { root: true }
+      )
+    }
     loading.value = false
-  }
+  })
 }
 
 const saveCaseDetails = async () => {
@@ -132,7 +148,7 @@ const handleDescriptionUpdate = (newDescription) => {
 }
 
 watch(
-  () => route.params.id,
+  () => route.params.name,
   (newName, oldName) => {
     if (newName !== oldName) {
       fetchDetails()
diff --git a/src/dispatch/static/dispatch/src/case/PageHeader.vue b/src/dispatch/static/dispatch/src/case/PageHeader.vue
index 965102f2ec42..760039726425 100644
--- a/src/dispatch/static/dispatch/src/case/PageHeader.vue
+++ b/src/dispatch/static/dispatch/src/case/PageHeader.vue
@@ -33,17 +33,22 @@
 
 <script setup lang="ts">
 import { useRoute } from "vue-router"
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 import LockButton from "@/components/LockButton.vue"
 import EscalateButton from "@/case/EscalateButton.vue"
 import DTooltip from "@/components/DTooltip.vue"
 import ParticipantAvatarGroup from "@/participant/ParticipantAvatarGroup.vue"
 import SavingState from "@/components/SavingState.vue"
 import CaseApi from "@/case/api"
+import type { Ref } from "vue"
 
 const route = useRoute()
 
 const props = defineProps({
+  caseId: {
+    type: Number,
+    required: true,
+  },
   caseName: {
     type: String,
     required: true,
@@ -68,22 +73,28 @@ const props = defineProps({
 
 const caseParticipants = ref([])
 const loading = ref(false)
+const caseIdRef: Ref<any> = ref(props.caseId)
 
-const fetchParticipants = async () => {
-  const caseId = route.params.id
-  loading.value = true
-  try {
-    // get case participants
-    CaseApi.getParticipants(caseId, true).then((response) => {
-      // Pass true to fetch minimal data
-      caseParticipants.value = response.data
-    })
-    loading.value = false
-  } catch (e) {
-    console.error("Failed to fetch case participants", e)
-    loading.value = false
-  }
-}
+watch(
+  () => props.caseId,
+  async (caseId) => {
+    caseIdRef.value = caseId
+    if (caseId) {
+      try {
+        // get case participants
+        CaseApi.getParticipants(caseIdRef.value, true).then((response) => {
+          // Pass true to fetch minimal data
+          caseParticipants.value = response.data
+        })
+        loading.value = false
+      } catch (e) {
+        console.error("Failed to fetch case participants", e)
+        loading.value = false
+      }
+    }
+  },
+  { immediate: true }
+)
 
 const emit = defineEmits(["toggle-drawer"])
 
@@ -105,9 +116,6 @@ const breadcrumbItems = computed(() => {
   ]
   return items
 })
-
-// Fetch participants immediately when the component is created
-fetchParticipants()
 </script>
 
 <style scoped>
diff --git a/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue b/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
index 63ac38a36fc3..4f84b7430bc5 100644
--- a/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
+++ b/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
@@ -1,11 +1,10 @@
 <template>
-  <v-form @submit.prevent v-slot="{ isValid }">
+  <v-form ref="form" @submit.prevent>
     <v-card
       class="mx-auto ma-4"
       max-width="600"
       variant="outlined"
-      title="          Open a Case
-"
+      title="          Open a Case"
       :loading="loading"
     >
       <template #append>
@@ -32,50 +31,48 @@
             <v-icon size="small">mdi-open-in-new</v-icon>
           </a>
         </p>
-        <v-form>
-          <v-container>
-            <v-row>
-              <v-col cols="12">
-                <v-textarea
-                  v-model="title"
-                  label="Title"
-                  hint="A brief explanatory title. You can change this later."
-                  clearable
-                  auto-grow
-                  rows="2"
-                  required
-                  name="Title"
-                  :rules="[rules.required]"
-                />
-              </v-col>
-              <v-col cols="12">
-                <v-textarea
-                  v-model="description"
-                  label="Description"
-                  hint="A summary of what you know so far. It's all right if this is incomplete."
-                  clearable
-                  auto-grow
-                  rows="3"
-                  required
-                  name="Description"
-                  :rules="[rules.required]"
-                />
-              </v-col>
-              <v-col cols="12">
-                <project-select v-model="project" />
-              </v-col>
-              <v-col cols="12">
-                <case-type-select :project="project" v-model="case_type" />
-              </v-col>
-              <v-col cols="12">
-                <case-priority-select :project="project" v-model="case_priority" />
-              </v-col>
-              <v-col cols="12">
-                <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-form>
+        <v-container>
+          <v-row>
+            <v-col cols="12">
+              <v-textarea
+                v-model="title"
+                label="Title"
+                hint="A brief explanatory title. You can change this later."
+                clearable
+                auto-grow
+                rows="2"
+                required
+                name="Title"
+                :rules="[rules.required]"
+              />
+            </v-col>
+            <v-col cols="12">
+              <v-textarea
+                v-model="description"
+                label="Description"
+                hint="A summary of what you know so far. It's all right if this is incomplete."
+                clearable
+                auto-grow
+                rows="3"
+                required
+                name="Description"
+                :rules="[rules.required]"
+              />
+            </v-col>
+            <v-col cols="12">
+              <project-select v-model="project" />
+            </v-col>
+            <v-col cols="12">
+              <case-type-select :project="project" v-model="case_type" />
+            </v-col>
+            <v-col cols="12">
+              <case-priority-select :project="project" v-model="case_priority" />
+            </v-col>
+            <v-col cols="12">
+              <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
+            </v-col>
+          </v-row>
+        </v-container>
       </v-card-text>
       <v-card-actions>
         <v-spacer />
@@ -84,7 +81,7 @@
           variant="flat"
           block
           :loading="loading"
-          :disabled="!isValid.value"
+          :disabled="!formIsValid"
           @click="report()"
         >
           Submit
@@ -128,6 +125,12 @@ export default {
     return {
       isSubmitted: false,
       project_faq: null,
+      formIsValid: false,
+      titleValid: false,
+      descriptionValid: false,
+      projectValid: false,
+      caseTypeValid: false,
+      casePriorityValid: false,
     }
   },
 
@@ -148,6 +151,17 @@ export default {
     ]),
   },
 
+  watch: {
+    title() {
+      this.titleValid = !!this.title
+      this.checkFormValidity()
+    },
+    description() {
+      this.descriptionValid = !!this.description
+      this.checkFormValidity()
+    },
+  },
+
   methods: {
     getFAQ() {
       if (this.project) {
@@ -198,6 +212,9 @@ export default {
         }
       )
     },
+    checkFormValidity() {
+      this.formIsValid = this.titleValid && this.descriptionValid
+    },
     ...mapActions("case_management", ["report", "get", "resetSelected"]),
   },
 
diff --git a/src/dispatch/static/dispatch/src/case/Table.vue b/src/dispatch/static/dispatch/src/case/Table.vue
index 056dbcc0d776..cf189a059bea 100644
--- a/src/dispatch/static/dispatch/src/case/Table.vue
+++ b/src/dispatch/static/dispatch/src/case/Table.vue
@@ -92,7 +92,7 @@
                   <v-list-item
                     :to="{
                       name: 'CasePage',
-                      params: { id: item.id },
+                      params: { name: item.name },
                     }"
                   >
                     <v-list-item-title>View</v-list-item-title>
diff --git a/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue b/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue
index 0c72ad93bba2..44fc91515a32 100644
--- a/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue"
+import { ref, watch } from "vue"
 import CasePriorityApi from "@/case/priority/api"
 import CaseApi from "@/case/api"
 import SearchPopover from "@/components/SearchPopover.vue"
@@ -11,21 +11,35 @@ type CasePriority = {
   name: string
 }
 
-defineProps<{ casePriority: string }>()
+const props = defineProps<{ casePriority: string; project: string }>()
 
 const store = useStore()
 const { setSaving } = useSavingState()
 const casePriorities: Ref<CasePriority[]> = ref([])
+const currentProject: Ref<string> = ref(props.project)
 
-onMounted(async () => {
-  try {
-    const options = { itemsPerPage: -1 }
-    const response = await CasePriorityApi.getAll(options)
-    casePriorities.value = response.data.items.map((item: any) => item.name)
-  } catch (error) {
-    console.error("Error fetching priorities:", error)
-  }
-})
+watch(
+  () => props.project,
+  async (newVal) => {
+    currentProject.value = newVal
+    if (newVal) {
+      try {
+        const options = {
+          itemsPerPage: -1,
+          filter: JSON.stringify([
+            { and: [{ model: "Project", field: "name", op: "==", value: newVal }] },
+          ]),
+        }
+
+        const response = await CasePriorityApi.getAll(options)
+        casePriorities.value = response.data.items.map((item: any) => item.name)
+      } catch (error) {
+        console.error("Error fetching priorities:", error)
+      }
+    }
+  },
+  { immediate: true }
+)
 
 const selectCasePriority = async (casePriorityName: string) => {
   // Fetch the participant object from the API
diff --git a/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue b/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue
index c5d8ef22589d..36e00dc43869 100644
--- a/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue"
+import { watch, ref } from "vue"
 import CaseSeverityApi from "@/case/severity/api"
 import CaseApi from "@/case/api"
 import SearchPopover from "@/components/SearchPopover.vue"
@@ -11,21 +11,35 @@ type CaseSeverity = {
   name: string
 }
 
-defineProps<{ caseSeverity: string }>()
+const props = defineProps<{ caseSeverity: string; project: string }>()
 
 const store = useStore()
 const { setSaving } = useSavingState()
 const caseSeveritys: Ref<CaseSeverity[]> = ref([])
+const currentProject: Ref<string> = ref(props.project)
 
-onMounted(async () => {
-  try {
-    const options = { itemsPerPage: -1 }
-    const response = await CaseSeverityApi.getAll(options)
-    caseSeveritys.value = response.data.items.map((item: any) => item.name)
-  } catch (error) {
-    console.error("Error fetching case severities:", error)
-  }
-})
+watch(
+  () => props.project,
+  async (newVal) => {
+    currentProject.value = newVal
+    if (newVal) {
+      try {
+        const options = {
+          itemsPerPage: -1,
+          filter: JSON.stringify([
+            { and: [{ model: "Project", field: "name", op: "==", value: newVal }] },
+          ]),
+        }
+
+        const response = await CaseSeverityApi.getAll(options)
+        caseSeveritys.value = response.data.items.map((item: any) => item.name)
+      } catch (error) {
+        console.error("Error fetching priorities:", error)
+      }
+    }
+  },
+  { immediate: true }
+)
 
 const selectCaseSeverity = async (caseSeverityName: string) => {
   // Fetch the participant object from the API
diff --git a/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue b/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue
index a7f47a39cc15..c3171b8a36b9 100644
--- a/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue"
+import { watch, ref } from "vue"
 import CaseTypeApi from "@/case/type/api"
 import CaseApi from "@/case/api"
 import SearchPopover from "@/components/SearchPopover.vue"
@@ -11,21 +11,35 @@ type CaseType = {
   name: string
 }
 
-defineProps<{ caseType: string }>()
+const props = defineProps<{ caseType: string; project: string }>()
 
 const store = useStore()
 const { setSaving } = useSavingState()
 const caseTypes: Ref<CaseType[]> = ref([])
+const currentProject: Ref<string> = ref(props.project)
 
-onMounted(async () => {
-  try {
-    const options = { itemsPerPage: -1 }
-    const response = await CaseTypeApi.getAll(options)
-    caseTypes.value = response.data.items.map((item: any) => item.name)
-  } catch (error) {
-    console.error("Error fetching case types:", error)
-  }
-})
+watch(
+  () => props.project,
+  async (newVal) => {
+    currentProject.value = newVal
+    if (newVal) {
+      try {
+        const options = {
+          itemsPerPage: -1,
+          filter: JSON.stringify([
+            { and: [{ model: "Project", field: "name", op: "==", value: newVal }] },
+          ]),
+        }
+
+        const response = await CaseTypeApi.getAll(options)
+        caseTypes.value = response.data.items.map((item: any) => item.name)
+      } catch (error) {
+        console.error("Error fetching priorities:", error)
+      }
+    }
+  },
+  { immediate: true }
+)
 
 const selectCaseType = async (caseTypeName: string) => {
   // Fetch the participant object from the API
diff --git a/src/dispatch/static/dispatch/src/router/config.js b/src/dispatch/static/dispatch/src/router/config.js
index ebce1af4e6cd..f14781b94a6e 100644
--- a/src/dispatch/static/dispatch/src/router/config.js
+++ b/src/dispatch/static/dispatch/src/router/config.js
@@ -205,7 +205,7 @@ export const protectedRoute = [
           ],
         },
         {
-          path: "/:organization/cases/:id",
+          path: "/:organization/cases/:name",
           name: "CasePage",
           meta: { title: "Page" },
           component: () => import("@/case/Page.vue"),
diff --git a/src/dispatch/static/dispatch/src/tests/CaseStatusSelectGroup.spec.js b/src/dispatch/static/dispatch/src/tests/CaseStatusSelectGroup.spec.js
new file mode 100644
index 000000000000..47ee1f2e0068
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/tests/CaseStatusSelectGroup.spec.js
@@ -0,0 +1,71 @@
+import { mount } from "@vue/test-utils"
+import { createStore } from "vuex"
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+import { describe, expect, it, vi, afterEach, beforeEach } from "vitest"
+import CaseStatusSelectGroup from "@/case/CaseStatusSelectGroup.vue"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+global.ResizeObserver = require("resize-observer-polyfill")
+
+describe("CaseStatusSelectGroup", () => {
+  let actions
+  let mockStore
+  let wrapper
+
+  beforeEach(() => {
+    // Mock the store and actions
+    actions = {
+      addBeNotification: vi.fn(),
+    }
+
+    mockStore = createStore({
+      modules: {
+        notification_backend: {
+          namespaced: true,
+          actions,
+        },
+        case_management: {
+          namespaced: true,
+          state: {
+            selected: {
+              id: 1,
+              status: "New",
+            },
+          },
+        },
+      },
+    })
+
+    // Mount the component
+    wrapper = mount(CaseStatusSelectGroup, {
+      props: {
+        modelValue: {
+          status: "New",
+          created_at: "2022-01-01",
+        },
+      },
+      global: {
+        plugins: [mockStore, vuetify], // 👈
+      },
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("mounts correctly", () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it("opens dialog on status click", async () => {
+    await wrapper.find(".overlap-card").trigger("click")
+    expect(wrapper.vm.dialogVisible).toBe(true)
+  })
+})