diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index b4c54dec..e654111e 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -13,12 +13,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
         with:
           node-version: 22.x
           cache: "npm"
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
       - name: Restore Cache
-        uses: actions/cache@v4
+        uses: actions/cache@v3
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
diff --git a/mikro-orm.config.ts b/mikro-orm.config.ts
index 96e8c0fc..b450d26e 100644
--- a/mikro-orm.config.ts
+++ b/mikro-orm.config.ts
@@ -42,7 +42,7 @@ const config: Options = {
     // https://github.com/mikro-orm/mikro-orm/issues/303
     driverOptions: {
         connection: {
-            ssl: JSON.parse(process.env.POSTGRES_SSL || 'false')
+            ssl: Boolean(process.env.POSTGRES_SSL)
         }
     },
     entities: [
diff --git a/pages/[organization-slug]/[solution-slug]/environment/constraints.client.vue b/pages/[organization-slug]/[solution-slug]/environment/constraints.client.vue
index 44002bf2..922cd72e 100644
--- a/pages/[organization-slug]/[solution-slug]/environment/constraints.client.vue
+++ b/pages/[organization-slug]/[solution-slug]/environment/constraints.client.vue
@@ -86,15 +86,15 @@ const onUpdate = async (data: ConstraintViewModel) => {
         </Column>
         <Column field="category" header="Category" sortable>
             <template #filter="{ filterModel, filterCallback }">
-                <Select v-model="filterModel.value" :options="constraintCategories" optionLabel="description"
+                <Dropdown v-model="filterModel.value" :options="constraintCategories" optionLabel="description"
                     optionValue="id" @change="filterCallback()" />
             </template>
             <template #body="{ data, field }">
                 {{ constraintCategories.find(o => o.id === data[field])?.description }}
             </template>
             <template #editor="{ data, field }">
-                <Select v-model="data[field]" :options="constraintCategories" optionLabel="description" optionValue="id"
-                    required="true" />
+                <Dropdown v-model="data[field]" :options="constraintCategories" optionLabel="description"
+                    optionValue="id" required="true" />
             </template>
         </Column>
         <Column field="statement" header="Description">
diff --git a/pages/[organization-slug]/[solution-slug]/goals/scenarios.client.vue b/pages/[organization-slug]/[solution-slug]/goals/scenarios.client.vue
index 775efe91..85833fa8 100644
--- a/pages/[organization-slug]/[solution-slug]/goals/scenarios.client.vue
+++ b/pages/[organization-slug]/[solution-slug]/goals/scenarios.client.vue
@@ -116,40 +116,40 @@ const onUserStoryDelete = async (id: string) => {
         </Column>
         <Column field="primaryActorId" header="Stakeholder">
             <template #filter="{ filterModel, filterCallback }">
-                <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
+                <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
                     :options="roles!" placeholder="Search by Stakeholder" />
             </template>
             <template #body="{ data, field }">
                 {{ roles?.find(r => r.id === data[field])?.name }}
             </template>
             <template #editor="{ data, field }">
-                <Select v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="roles!"
+                <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="roles!"
                     placeholder="Select an Stakeholder" />
             </template>
         </Column>
         <Column field="functionalBehaviorId" header="Behavior">
             <template #filter="{ filterModel, filterCallback }">
-                <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
+                <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
                     :options="functionalBehaviors!" placeholder="Search by Behavior" />
             </template>
             <template #body="{ data, field }">
                 {{ functionalBehaviors?.find(b => b.id === data[field])?.name }}
             </template>
             <template #editor="{ data, field }">
-                <Select v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="functionalBehaviors!"
+                <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="functionalBehaviors!"
                     placeholder="Select a Behavior" />
             </template>
         </Column>
         <Column field="outcomeId" header="Outcome">
             <template #filter="{ filterModel, filterCallback }">
-                <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
+                <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
                     :options="outcomes!" placeholder="Search by Outcome" />
             </template>
             <template #body="{ data, field }">
                 {{ outcomes?.find(o => o.id === data[field])?.name }}
             </template>
             <template #editor="{ data, field }">
-                <Select v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="outcomes!"
+                <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="outcomes!"
                     placeholder="Select an Outcome" />
             </template>
         </Column>
diff --git a/pages/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue b/pages/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue
index 3dfbc864..2488bf0b 100644
--- a/pages/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue
+++ b/pages/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue
@@ -180,27 +180,27 @@ const onDelete = async (id: string) => {
                 </Column>
                 <Column field="category" header="Category" sortable>
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model="filterModel.value" :options="categories" optionLabel="description"
+                        <Dropdown v-model="filterModel.value" :options="categories" optionLabel="description"
                             optionValue="id" @input="filterCallback()" />
                     </template>
                     <template #body="{ data, field }">
                         {{ categories.find(({ id }) => id === data[field])?.description }}
                     </template>
                     <template #editor="{ data, field }">
-                        <Select v-model="data[field]" :options="categories" optionLabel="description" optionValue="id"
+                        <Dropdown v-model="data[field]" :options="categories" optionLabel="description" optionValue="id"
                             required="true" />
                     </template>
                 </Column>
                 <Column field="segmentation" header="Segmentation" sortable>
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model="filterModel.value" :options="segmentations" optionLabel="description"
+                        <Dropdown v-model="filterModel.value" :options="segmentations" optionLabel="description"
                             optionValue="id" @input="filterCallback()" />
                     </template>
                     <template #body="{ data, field }">
                         {{ segmentations.find(({ id }) => id === data[field])?.description }}
                     </template>
                     <template #editor="{ data, field }">
-                        <Select v-model="data[field]" :options="segmentations" optionLabel="description"
+                        <Dropdown v-model="data[field]" :options="segmentations" optionLabel="description"
                             optionValue="id" required="true" />
                     </template>
                 </Column>
diff --git a/pages/[organization-slug]/[solution-slug]/system/components.client.vue b/pages/[organization-slug]/[solution-slug]/system/components.client.vue
index 6d743015..6cd4bdad 100644
--- a/pages/[organization-slug]/[solution-slug]/system/components.client.vue
+++ b/pages/[organization-slug]/[solution-slug]/system/components.client.vue
@@ -87,14 +87,14 @@ const onDelete = async (id: string) => {
         </Column>
         <Column field="parentComponentId" header="Parent">
             <template #filter="{ filterModel, filterCallback }">
-                <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
+                <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
                     :options="systemComponents!" placeholder="Search by Component" />
             </template>
             <template #body="{ data, field }">
                 {{ systemComponents?.find(c => c.id === data[field])?.name }}
             </template>
             <template #editor="{ data, field }">
-                <Select v-model.trim="data[field]" optionLabel="name" optionValue="id"
+                <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id"
                     :options="systemComponents!.filter(c => c.id !== data.id)" placeholder="Select a Component"
                     showClear />
             </template>
diff --git a/pages/[organization-slug]/[solution-slug]/system/functionality.client.vue b/pages/[organization-slug]/[solution-slug]/system/functionality.client.vue
index e8346b6b..f59e43d4 100644
--- a/pages/[organization-slug]/[solution-slug]/system/functionality.client.vue
+++ b/pages/[organization-slug]/[solution-slug]/system/functionality.client.vue
@@ -129,7 +129,7 @@ const onRowCollapse = (event: any) => {
         </Column>
         <Column field="parentId" header="Parent">
             <template #filter="{ filterModel, filterCallback }">
-                <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
+                <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
                     :options="components!" placeholder="Search by Component" />
             </template>
             <template #body="{ data, field }">
diff --git a/pages/[organization-slug]/[solution-slug]/system/scenarios.client.vue b/pages/[organization-slug]/[solution-slug]/system/scenarios.client.vue
index 876b8be1..294e4f87 100644
--- a/pages/[organization-slug]/[solution-slug]/system/scenarios.client.vue
+++ b/pages/[organization-slug]/[solution-slug]/system/scenarios.client.vue
@@ -182,40 +182,40 @@ const onUseCaseDelete = async (id: string) => {
                 </Column>
                 <Column field="primaryActorId" header="Actor">
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
+                        <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
                             optionValue="id" :options="roles!" placeholder="Search by Actor" />
                     </template>
                     <template #body="{ data, field }">
                         {{ roles?.find(r => r.id === data[field])?.name }}
                     </template>
                     <template #editor="{ data, field }">
-                        <Select v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="roles!"
+                        <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="roles!"
                             placeholder="Select an Actor" />
                     </template>
                 </Column>
                 <Column field="functionalBehaviorId" header="Behavior">
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
+                        <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
                             optionValue="id" :options="functionalBehaviors!" placeholder="Search by Behavior" />
                     </template>
                     <template #body="{ data, field }">
                         {{ functionalBehaviors?.find(b => b.id === data[field])?.name }}
                     </template>
                     <template #editor="{ data, field }">
-                        <Select v-model.trim="data[field]" optionLabel="name" optionValue="id"
+                        <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id"
                             :options="functionalBehaviors!" placeholder="Select a Behavior" />
                     </template>
                 </Column>
                 <Column field="outcomeId" header="Outcome">
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
+                        <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
                             optionValue="id" :options="outcomes!" placeholder="Search by Outcome" />
                     </template>
                     <template #body="{ data, field }">
                         {{ outcomes?.find(o => o.id === data[field])?.name }}
                     </template>
                     <template #editor="{ data, field }">
-                        <Select v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="outcomes!"
+                        <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="outcomes!"
                             placeholder="Select an Outcome" />
                     </template>
                 </Column>
@@ -266,14 +266,14 @@ const onUseCaseDelete = async (id: string) => {
                 </Column>
                 <Column field="primaryActorId" header="Actor">
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
+                        <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
                             optionValue="id" :options="roles!" placeholder="Search by Actor" />
                     </template>
                     <template #body="{ data, field }">
                         {{ roles?.find(r => r.id === data[field])?.name }}
                     </template>
                     <template #editor="{ data, field }">
-                        <Select v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="roles!"
+                        <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="roles!"
                             placeholder="Select an Actor" />
                     </template>
                 </Column>
@@ -291,27 +291,27 @@ const onUseCaseDelete = async (id: string) => {
                 </Column>
                 <Column field="preconditionId" header="Precondition">
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
+                        <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
                             optionValue="id" :options="assumptions!" placeholder="Search by precondition" />
                     </template>
                     <template #body="{ data, field }">
                         {{ assumptions?.find(a => a.id === data[field])?.name }}
                     </template>
                     <template #editor="{ data, field }">
-                        <Select v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="assumptions!"
+                        <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="assumptions!"
                             placeholder="Select a pre-condition" />
                     </template>
                 </Column>
                 <Column field="triggerId" header="Trigger">
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
+                        <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
                             optionValue="id" :options="triggers!" placeholder="Search by trigger" />
                     </template>
                     <template #body="{ data, field }">
                         {{ effects?.find(e => e.id === data[field])?.name }}
                     </template>
                     <template #editor="{ data, field }">
-                        <Select v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="triggers!"
+                        <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="triggers!"
                             placeholder="Select a trigger" />
                     </template>
                 </Column>
@@ -326,14 +326,14 @@ const onUseCaseDelete = async (id: string) => {
                 </Column>
                 <Column field="successGuaranteeId" header="Success Guarantee">
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
+                        <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name"
                             optionValue="id" :options="effects!" placeholder="Search by success guarantee" />
                     </template>
                     <template #body="{ data, field }">
                         {{ effects?.find(e => e.id === data[field])?.name }}
                     </template>
                     <template #editor="{ data, field }">
-                        <Select v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="effects!"
+                        <Dropdown v-model.trim="data[field]" optionLabel="name" optionValue="id" :options="effects!"
                             placeholder="Select a success guarantee" />
                     </template>
                 </Column>