diff --git a/goosebit/__init__.py b/goosebit/__init__.py
index 1c72e5a9..4034c943 100644
--- a/goosebit/__init__.py
+++ b/goosebit/__init__.py
@@ -3,12 +3,13 @@
 from logging import getLogger
 from typing import Annotated
 
-from fastapi import Depends, FastAPI
+from fastapi import Depends, FastAPI, HTTPException
 from fastapi.openapi.docs import get_swagger_ui_html
 from fastapi.requests import Request
 from fastapi.responses import RedirectResponse
 from fastapi.security import OAuth2PasswordRequestForm
 from opentelemetry.instrumentation.fastapi import FastAPIInstrumentor as Instrumentor
+from tortoise.exceptions import ValidationError
 
 from goosebit import api, db, realtime, ui, updater
 from goosebit.api.telemetry import metrics
@@ -58,6 +59,12 @@ async def lifespan(_: FastAPI):
 Instrumentor.instrument_app(app)
 
 
+# Custom exception handler for Tortoise ValidationError
+@app.exception_handler(ValidationError)
+async def tortoise_validation_exception_handler(request: Request, exc: ValidationError):
+    raise HTTPException(422, str(exc))
+
+
 @app.middleware("http")
 async def attach_user(request: Request, call_next):
     request.scope["user"] = await get_user_from_request(request)
diff --git a/goosebit/db/models.py b/goosebit/db/models.py
index 91e60ec0..941316e5 100644
--- a/goosebit/db/models.py
+++ b/goosebit/db/models.py
@@ -8,6 +8,7 @@
 import semver
 from anyio import Path
 from tortoise import Model, fields
+from tortoise.exceptions import ValidationError
 
 from goosebit.api.telemetry.metrics import devices_count
 
@@ -75,6 +76,14 @@ class Device(Model):
     tags = fields.ManyToManyField("models.Tag", related_name="devices", through="device_tags")
 
     async def save(self, *args, **kwargs):
+        # Check if the software is compatible with the hardware before saving
+        if self.assigned_software and self.hardware:
+            # Check if the assigned software is compatible with the hardware
+            await self.fetch_related("assigned_software", "hardware")
+            is_compatible = await self.assigned_software.compatibility.filter(id=self.hardware.id).exists()
+            if not is_compatible:
+                raise ValidationError("The assigned software is not compatible with the device's hardware.")
+
         is_new = self._saved_in_db is False
         await super().save(*args, **kwargs)
         if is_new:
diff --git a/goosebit/ui/bff/common/requests.py b/goosebit/ui/bff/common/requests.py
index feb629bd..f19ac7f8 100644
--- a/goosebit/ui/bff/common/requests.py
+++ b/goosebit/ui/bff/common/requests.py
@@ -39,7 +39,7 @@ class DataTableRequest(BaseModel):
     columns: list[DataTableColumnSchema] = list()
     order: list[DataTableOrderSchema] = list()
     start: int = 0
-    length: int = 10
+    length: int = 0
     search: DataTableSearchSchema = DataTableSearchSchema()
 
     @computed_field  # type: ignore[misc]
diff --git a/goosebit/ui/bff/devices/routes.py b/goosebit/ui/bff/devices/routes.py
index cee953c7..27e6d36f 100644
--- a/goosebit/ui/bff/devices/routes.py
+++ b/goosebit/ui/bff/devices/routes.py
@@ -35,7 +35,7 @@ def search_filter(search_value: str):
             | Q(last_state=int(UpdateStateEnum.from_str(search_value)))
         )
 
-    query = Device.all().prefetch_related("assigned_software", "hardware")
+    query = Device.all().prefetch_related("assigned_software", "hardware", "assigned_software__compatibility")
 
     return await BFFDeviceResponse.convert(dt_query, query, search_filter)
 
diff --git a/goosebit/ui/bff/software/responses.py b/goosebit/ui/bff/software/responses.py
index 7c71ac4b..7c3cd55b 100644
--- a/goosebit/ui/bff/software/responses.py
+++ b/goosebit/ui/bff/software/responses.py
@@ -1,6 +1,7 @@
 from typing import Callable
 
 from pydantic import BaseModel, Field
+from tortoise.expressions import Q
 from tortoise.queryset import QuerySet
 
 from goosebit.schema.software import SoftwareSchema
@@ -14,8 +15,9 @@ class BFFSoftwareResponse(BaseModel):
     records_filtered: int = Field(serialization_alias="recordsFiltered")
 
     @classmethod
-    async def convert(cls, dt_query: DataTableRequest, query: QuerySet, search_filter: Callable):
+    async def convert(cls, dt_query: DataTableRequest, query: QuerySet, search_filter: Callable, alt_filter: Q):
         total_records = await query.count()
+        query = query.filter(alt_filter)
         if dt_query.search.value:
             query = query.filter(search_filter(dt_query.search.value))
 
@@ -23,7 +25,13 @@ async def convert(cls, dt_query: DataTableRequest, query: QuerySet, search_filte
             query = query.order_by(dt_query.order_query)
 
         filtered_records = await query.count()
-        devices = await query.offset(dt_query.start).limit(dt_query.length).all()
+
+        query = query.offset(dt_query.start)
+
+        if not dt_query.length == 0:
+            query = query.limit(dt_query.length)
+
+        devices = await query.all()
         data = [SoftwareSchema.model_validate(d) for d in devices]
 
         return cls(data=data, draw=dt_query.draw, records_total=total_records, records_filtered=filtered_records)
diff --git a/goosebit/ui/bff/software/routes.py b/goosebit/ui/bff/software/routes.py
index 35ae9748..1edb6d7f 100644
--- a/goosebit/ui/bff/software/routes.py
+++ b/goosebit/ui/bff/software/routes.py
@@ -3,13 +3,13 @@
 from typing import Annotated
 
 from anyio import Path, open_file
-from fastapi import APIRouter, Depends, Form, HTTPException, Security, UploadFile
+from fastapi import APIRouter, Depends, Form, HTTPException, Query, Security, UploadFile
 from fastapi.requests import Request
 from tortoise.expressions import Q
 
 from goosebit.api.v1.software import routes
 from goosebit.auth import validate_user_permissions
-from goosebit.db.models import Rollout, Software
+from goosebit.db.models import Hardware, Rollout, Software
 from goosebit.settings import config
 from goosebit.ui.bff.common.requests import DataTableRequest
 from goosebit.ui.bff.common.util import parse_datatables_query
@@ -24,13 +24,23 @@
     "",
     dependencies=[Security(validate_user_permissions, scopes=["software.read"])],
 )
-async def software_get(dt_query: Annotated[DataTableRequest, Depends(parse_datatables_query)]) -> BFFSoftwareResponse:
-    def search_filter(search_value: str):
-        return Q(uri__icontains=search_value) | Q(version__icontains=search_value)
+async def software_get(
+    dt_query: Annotated[DataTableRequest, Depends(parse_datatables_query)],
+    uuids: list[str] = Query(default=None),
+) -> BFFSoftwareResponse:
+    filters: list[Q] = []
+
+    def search_filter(search_value):
+        base_filter = Q(Q(uri__icontains=search_value), Q(version__icontains=search_value), join_type="OR")
+        return Q(base_filter, *filters, join_type="AND")
 
     query = Software.all().prefetch_related("compatibility")
 
-    return await BFFSoftwareResponse.convert(dt_query, query, search_filter)
+    if uuids:
+        hardware = await Hardware.filter(devices__uuid__in=uuids).distinct()
+        filters.append(Q(*[Q(compatibility__id=c.id) for c in hardware], join_type="AND"))
+
+    return await BFFSoftwareResponse.convert(dt_query, query, search_filter, Q(*filters))
 
 
 router.add_api_route(
diff --git a/goosebit/ui/static/js/devices.js b/goosebit/ui/static/js/devices.js
index 09de81b7..f30ef674 100644
--- a/goosebit/ui/static/js/devices.js
+++ b/goosebit/ui/static/js/devices.js
@@ -124,20 +124,11 @@ document.addEventListener("DOMContentLoaded", async () => {
                     {
                         text: '<i class="bi bi-pen" ></i>',
                         action: () => {
-                            const selectedDevice = dataTable.rows({ selected: true }).data().toArray()[0];
-                            $("#device-selected-name").val(selectedDevice.name);
+                            const selectedDevices = dataTable.rows({ selected: true }).data().toArray();
+                            const selectedDevice = selectedDevices[0];
+                            updateSoftwareSelection(selectedDevices);
+                            $("#device-name").val(selectedDevice.name);
                             $("#device-selected-feed").val(selectedDevice.feed);
-
-                            let selectedValue;
-                            if (selectedDevice.update_mode === "Rollout") {
-                                selectedValue = "rollout";
-                            } else if (selectedDevice.update_mode === "Latest") {
-                                selectedValue = "latest";
-                            } else {
-                                selectedValue = selectedDevice.sw_assigned;
-                            }
-                            $("#selected-sw").val(selectedValue);
-
                             new bootstrap.Modal("#device-config-modal").show();
                         },
                         className: "buttons-config",
@@ -199,22 +190,89 @@ document.addEventListener("DOMContentLoaded", async () => {
         dataTable.ajax.reload(null, false);
     }, TABLE_UPDATE_TIME);
 
-    await updateSoftwareSelection(true);
+    await updateSoftwareSelection();
+
+    // Name update form submit
+    const nameForm = document.getElementById("device-name-form");
+    nameForm.addEventListener(
+        "submit",
+        async (event) => {
+            if (nameForm.checkValidity() === false) {
+                event.preventDefault();
+                event.stopPropagation();
+                nameForm.classList.add("was-validated");
+            } else {
+                event.preventDefault();
+                await updateDeviceName();
+                nameForm.classList.remove("was-validated");
+                nameForm.reset();
+                const modal = bootstrap.Modal.getInstance(document.getElementById("device-config-modal"));
+                modal.hide();
+            }
+        },
+        false,
+    );
+
+    // Rollout form submit
+    const rolloutForm = document.getElementById("device-software-rollout-form");
+    rolloutForm.addEventListener(
+        "submit",
+        async (event) => {
+            if (rolloutForm.checkValidity() === false) {
+                event.preventDefault();
+                event.stopPropagation();
+                rolloutForm.classList.add("was-validated");
+            } else {
+                event.preventDefault();
+                await updateDeviceRollout();
+                rolloutForm.classList.remove("was-validated");
+                rolloutForm.reset();
+                const modal = bootstrap.Modal.getInstance(document.getElementById("device-config-modal"));
+                modal.hide();
+            }
+        },
+        false,
+    );
+
+    // Manual software form submit
+    const manualSoftwareForm = document.getElementById("device-software-manual-form");
+    manualSoftwareForm.addEventListener(
+        "submit",
+        async (event) => {
+            if (manualSoftwareForm.checkValidity() === false) {
+                event.preventDefault();
+                event.stopPropagation();
+                manualSoftwareForm.classList.add("was-validated");
+                if (document.getElementById("selected-sw").value === "") {
+                    document.getElementById("selected-sw").parentElement.classList.add("is-invalid");
+                }
+            } else {
+                event.preventDefault();
+                await updateDeviceManualSoftware();
+                manualSoftwareForm.classList.remove("was-validated");
+                document.getElementById("selected-sw").parentElement.classList.remove("is-invalid");
+                manualSoftwareForm.reset();
+                const modal = bootstrap.Modal.getInstance(document.getElementById("device-config-modal"));
+                modal.hide();
+            }
+        },
+        false,
+    );
 
-    // Config form submit
-    const configForm = document.getElementById("device-config-form");
-    configForm.addEventListener(
+    // Latest software form submit
+    const latestSoftwareForm = document.getElementById("device-software-latest-form");
+    latestSoftwareForm.addEventListener(
         "submit",
         async (event) => {
-            if (configForm.checkValidity() === false) {
+            if (latestSoftwareForm.checkValidity() === false) {
                 event.preventDefault();
                 event.stopPropagation();
-                configForm.classList.add("was-validated");
+                latestSoftwareForm.classList.add("was-validated");
             } else {
                 event.preventDefault();
-                await updateDeviceConfig();
-                configForm.classList.remove("was-validated");
-                configForm.reset();
+                await updateDeviceLatest();
+                latestSoftwareForm.classList.remove("was-validated");
+                latestSoftwareForm.reset();
                 const modal = bootstrap.Modal.getInstance(document.getElementById("device-config-modal"));
                 modal.hide();
             }
@@ -244,18 +302,70 @@ function updateBtnState() {
     }
 }
 
-async function updateDeviceConfig() {
+async function updateDeviceName() {
+    const devices = dataTable
+        .rows({ selected: true })
+        .data()
+        .toArray()
+        .map((d) => d.uuid);
+    const name = document.getElementById("device-name").value;
+
+    try {
+        await patch_request("/ui/bff/devices", { devices, name });
+    } catch (error) {
+        console.error("Update device config failed:", error);
+    }
+
+    setTimeout(updateDeviceList, 50);
+}
+
+async function updateDeviceRollout() {
     const devices = dataTable
         .rows({ selected: true })
         .data()
         .toArray()
         .map((d) => d.uuid);
-    const name = document.getElementById("device-selected-name").value;
     const feed = document.getElementById("device-selected-feed").value;
+    const software = "rollout";
+
+    try {
+        await patch_request("/ui/bff/devices", { devices, feed, software });
+    } catch (error) {
+        console.error("Update device config failed:", error);
+    }
+
+    setTimeout(updateDeviceList, 50);
+}
+
+async function updateDeviceManualSoftware() {
+    const devices = dataTable
+        .rows({ selected: true })
+        .data()
+        .toArray()
+        .map((d) => d.uuid);
+    const feed = null;
     const software = document.getElementById("selected-sw").value;
 
     try {
-        await patch_request("/ui/bff/devices", { devices, name, feed, software });
+        await patch_request("/ui/bff/devices", { devices, feed, software });
+    } catch (error) {
+        console.error("Update device config failed:", error);
+    }
+
+    setTimeout(updateDeviceList, 50);
+}
+
+async function updateDeviceLatest() {
+    const devices = dataTable
+        .rows({ selected: true })
+        .data()
+        .toArray()
+        .map((d) => d.uuid);
+    const feed = null;
+    const software = "latest";
+
+    try {
+        await patch_request("/ui/bff/devices", { devices, feed, software });
     } catch (error) {
         console.error("Update device config failed:", error);
     }
diff --git a/goosebit/ui/static/js/rollouts.js b/goosebit/ui/static/js/rollouts.js
index a61d3ffd..76618d7e 100644
--- a/goosebit/ui/static/js/rollouts.js
+++ b/goosebit/ui/static/js/rollouts.js
@@ -136,6 +136,9 @@ document.addEventListener("DOMContentLoaded", async () => {
         "submit",
         (event) => {
             if (form.checkValidity() === false) {
+                if (document.getElementById("selected-sw").value === "") {
+                    document.getElementById("selected-sw").parentElement.classList.add("is-invalid");
+                }
                 event.preventDefault();
                 event.stopPropagation();
                 form.classList.add("was-validated");
@@ -143,6 +146,7 @@ document.addEventListener("DOMContentLoaded", async () => {
                 event.preventDefault();
                 createRollout();
                 form.classList.remove("was-validated");
+                document.getElementById("selected-sw").parentElement.classList.remove("is-invalid");
                 form.reset();
                 const modal = bootstrap.Modal.getInstance(document.getElementById("rollout-create-modal"));
                 modal.hide();
diff --git a/goosebit/ui/static/js/util.js b/goosebit/ui/static/js/util.js
index 6c1a00e6..dd968687 100644
--- a/goosebit/ui/static/js/util.js
+++ b/goosebit/ui/static/js/util.js
@@ -20,27 +20,22 @@ function secondsToRecentDate(t) {
     return s + (s === 1 ? " second" : " seconds");
 }
 
-async function updateSoftwareSelection(addSpecialMode = false) {
+async function updateSoftwareSelection(devices = null) {
     try {
-        const response = await fetch("/ui/bff/software");
+        const url = new URL("/ui/bff/software", window.location.origin);
+        if (devices != null) {
+            for (const device of devices) {
+                url.searchParams.append("uuids", device.uuid);
+            }
+        }
+        const response = await fetch(url.toString());
         if (!response.ok) {
             console.error("Retrieving software list failed.");
             return;
         }
         const data = (await response.json()).data;
         const selectElem = document.getElementById("selected-sw");
-
-        if (addSpecialMode) {
-            let optionElem = document.createElement("option");
-            optionElem.value = "rollout";
-            optionElem.textContent = "Rollout";
-            selectElem.appendChild(optionElem);
-
-            optionElem = document.createElement("option");
-            optionElem.value = "latest";
-            optionElem.textContent = "Latest";
-            selectElem.appendChild(optionElem);
-        }
+        selectElem.innerHTML = "";
 
         for (const item of data) {
             const optionElem = document.createElement("option");
@@ -50,6 +45,20 @@ async function updateSoftwareSelection(addSpecialMode = false) {
             optionElem.textContent = `${item.version} (${models})`;
             selectElem.appendChild(optionElem);
         }
+        $("#selected-sw").selectpicker("destroy");
+        if (data.length === 0) {
+            selectElem.title = "No valid software found for selected device";
+            if (devices != null) {
+                if (devices.length > 1) {
+                    selectElem.title += "s";
+                }
+            }
+            selectElem.disabled = true;
+        } else {
+            selectElem.disabled = false;
+            selectElem.title = "Select Software";
+        }
+        $("#selected-sw").selectpicker();
     } catch (error) {
         console.error("Failed to fetch device data:", error);
     }
diff --git a/goosebit/ui/templates/devices.html.jinja b/goosebit/ui/templates/devices.html.jinja
index 83b8555d..ea0ab65f 100644
--- a/goosebit/ui/templates/devices.html.jinja
+++ b/goosebit/ui/templates/devices.html.jinja
@@ -28,46 +28,94 @@
             </div>
         </div>
     </div>
-    <div class="modal" id="device-config-modal">
-        <div class="modal-dialog modal-lg">
+    <div class="modal modal-lg fade" id="device-config-modal">
+        <div class="modal-dialog modal-dialog-centered modal-xl">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Configure Devices</h5>
+                    <h5 class="modal-title">Edit Devices</h5>
                     <button type="button"
                             class="btn-close"
                             data-bs-dismiss="modal"
                             aria-label="Close"></button>
                 </div>
-                <form id="device-config-form" class="needs-validation" novalidate>
-                    <div class="modal-body">
-                        <div class="form-group mb-3">
-                            <label for="device-selected-name">Name</label>
-                            <input id="device-selected-name" class="form-control" placeholder="Name" />
+                <div class="modal-body">
+                    <form id="device-name-form">
+                        <div class="input-group mb-3">
+                            <span class="input-group-text">Name</span>
+                            <input id="device-name" class="form-control" />
+                            <button type="submit" class="btn btn-outline-light">Apply</button>
                         </div>
-                        <div class="form-group mb-3">
-                            <label for="device-selected-feed">Feed</label>
-                            <input id="device-selected-feed"
-                                   class="form-control"
-                                   placeholder="Feed"
-                                   required />
-                            <div class="invalid-feedback">
-                                Feed missing. Use "default" if working with a single
-                                feed.
-                            </div>
+                    </form>
+                    <hr>
+                    <ul class="nav nav-underline nav-justified w-100" role="tablist">
+                        <li class="nav-item">
+                            <button class="nav-link active"
+                                    aria-current="page"
+                                    id="rollout-tab"
+                                    data-bs-toggle="tab"
+                                    data-bs-target="#rollout-tab-content"
+                                    type="button"
+                                    role="tab">Software Rollout</button>
+                        </li>
+                        <li class="nav-item">
+                            <button class="nav-link"
+                                    id="manual-tab"
+                                    data-bs-toggle="tab"
+                                    data-bs-target="#manual-tab-content"
+                                    type="button"
+                                    role="tab">Manual Software</button>
+                        </li>
+                        <li class="nav-item">
+                            <button class="nav-link"
+                                    id="latest-tab"
+                                    data-bs-toggle="tab"
+                                    data-bs-target="#latest-tab-content"
+                                    type="button"
+                                    role="tab">Latest Software</button>
+                        </li>
+                    </ul>
+                    <div class="tab-content mt-3">
+                        <div class="tab-pane active" id="rollout-tab-content">
+                            <form id="device-software-rollout-form" class="needs-validation" novalidate>
+                                <div class="form-group mb-3">
+                                    <div class="input-group mb-3 has-validation">
+                                        <span class="input-group-text">Feed</span>
+                                        <input id="device-selected-feed"
+                                               class="form-control"
+                                               value="default"
+                                               required />
+                                        <div class="invalid-feedback">Feed missing. Use "default" if working with a single feed.</div>
+                                    </div>
+                                </div>
+                                <button type="submit" class="btn btn-outline-light w-100">Use Software Rollout</button>
+                            </form>
                         </div>
-                        <div class="form-group mb-3">
-                            <label for="selected-sw">Update Mode</label>
-                            <select class="form-select" id="selected-sw" required>
-                                <option value="" disabled selected>Select software</option>
-                            </select>
-                            <div class="invalid-feedback">Mode missing.</div>
+                        <div class="tab-pane" id="manual-tab-content">
+                            <form id="device-software-manual-form" class="needs-validation" novalidate>
+                                <div class="form-group mb-3">
+                                    <div class="input-group mb-3 has-validation">
+                                        <span class="input-group-text">Software</span>
+                                        <select class="form-control"
+                                                id="selected-sw"
+                                                data-size="5"
+                                                data-style-base="form-control"
+                                                title="Select software"
+                                                data-live-search="true"
+                                                data-live-search-normalize="true"
+                                                required></select>
+                                        <div class="invalid-feedback">Software missing.</div>
+                                    </div>
+                                </div>
+                                <button type="submit" class="btn btn-outline-light w-100">Use Manual Software</button>
+                            </form>
+                        </div>
+                        <div class="tab-pane" id="latest-tab-content">
+                            <form id="device-software-latest-form" class="needs-validation" novalidate>
+                                <button type="submit" class="btn btn-outline-light w-100">Use Latest Software</button>
+                            </form>
                         </div>
                     </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                        <button type="submit" class="btn btn-outline-light">Save changes</button>
-                    </div>
-                </form>
+                </div>
             </div>
         </div>
     </div>
diff --git a/goosebit/ui/templates/nav.html.jinja b/goosebit/ui/templates/nav.html.jinja
index 3ca40f1f..84994786 100644
--- a/goosebit/ui/templates/nav.html.jinja
+++ b/goosebit/ui/templates/nav.html.jinja
@@ -10,8 +10,11 @@
               rel="stylesheet"
               integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
               crossorigin="anonymous" />
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-                integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+                integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+                crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
+                integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
                 crossorigin="anonymous"></script>
         <link rel="stylesheet"
               href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
@@ -27,6 +30,10 @@
         <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"
               rel="stylesheet" />
         <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
+        <!-- Bootstrap select (searchable select) -->
+        <link rel="stylesheet"
+              href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
         <!--data tables alignment fix-->
         <style>
             th.dt-type-numeric {
@@ -40,6 +47,19 @@
                 background-color: transparent;
             }
         </style>
+        <!--select search fix-->
+        <style>
+            .no-results {
+                background-color: var(--bs-body-bg)!important;
+            }
+            .bs-searchbox input {
+                border: var(--bs-border-width) solid var(--bs-border-color)!important;
+            }
+            .was-validated .bs-searchbox input {
+                background-image: none!important;
+                box-shadow: none!important;
+            }
+        </style>
         <script>const TABLE_UPDATE_TIME = 3000;</script>
         <script src="{{ url_for('static', path='js/util.js') }}"></script>
     </head>
diff --git a/goosebit/ui/templates/rollouts.html.jinja b/goosebit/ui/templates/rollouts.html.jinja
index eb359289..40fc990a 100644
--- a/goosebit/ui/templates/rollouts.html.jinja
+++ b/goosebit/ui/templates/rollouts.html.jinja
@@ -36,35 +36,35 @@
                     </div>
                     <form id="rollout-form" class="needs-validation" novalidate>
                         <div class="modal-body">
-                            <div class="form-group mb-3">
-                                <label for="rollout-selected-name">Name</label>
-                                <input id="rollout-selected-name"
-                                       class="form-control"
-                                       placeholder="Release 1" />
+                            <div class="input-group mb-3 has-validation">
+                                <span class="input-group-text">Name</span>
+                                <input class="form-control" id="rollout-selected-name" required />
+                                <div class="invalid-feedback">Name missing.</div>
+                            </div>
+                            <div class="input-group mb-3 has-validation">
+                                <span class="input-group-text">Feed</span>
+                                <input class="form-control" id="rollout-selected-feed" required />
+                                <div class="invalid-feedback">Feed missing. Use "default" if working with a single feed.</div>
                             </div>
                             <div class="form-group mb-3">
-                                <label for="rollout-selected-feed">Feed</label>
-                                <input id="rollout-selected-feed"
-                                       class="form-control"
-                                       placeholder="qa"
-                                       required />
-                                <div class="invalid-feedback">
-                                    Feed missing. Use "default" if working with a single
-                                    feed.
+                                <div class="input-group mb-3 has-validation">
+                                    <span class="input-group-text">Software</span>
+                                    <select class="form-control"
+                                            id="selected-sw"
+                                            data-size="5"
+                                            data-style-base="form-control"
+                                            title="Select software"
+                                            data-live-search="true"
+                                            data-live-search-normalize="true"
+                                            required></select>
+                                    <div class="invalid-feedback">Software missing.</div>
                                 </div>
                             </div>
-                            <div class="form-group mb-3">
-                                <label for="selected-sw">Software</label>
-                                <select class="form-select" id="selected-sw" required>
-                                    <option value="" disabled selected>Select software</option>
-                                </select>
-                                <div class="invalid-feedback">Select software for the rollout.</div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                <button type="submit" class="btn btn-outline-light">Save changes</button>
                             </div>
                         </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                            <button type="submit" class="btn btn-outline-light">Save changes</button>
-                        </div>
                     </form>
                 </div>
             </div>
diff --git a/goosebit/updater/manager.py b/goosebit/updater/manager.py
index 58e0c526..f6afeb11 100644
--- a/goosebit/updater/manager.py
+++ b/goosebit/updater/manager.py
@@ -167,9 +167,11 @@ async def get_device(self) -> Device:
         return (await Device.get_or_create(uuid=self.dev_id, defaults={"hardware": hardware}))[0]
 
     async def save_device(self, device: Device, update_fields: list[str]):
+        await device.save(update_fields=update_fields)
+
+        # only update cache after a successful database save
         result = await caches.get("default").set(self.dev_id, device, ttl=600)
         assert result, "device being cached"
-        await device.save(update_fields=update_fields)
 
     async def update_force_update(self, force_update: bool) -> None:
         device = await self.get_device()