diff --git a/docs/docs/configuration/object_detectors.md b/docs/docs/configuration/object_detectors.md
index 64838d0a7e..51a9b213a0 100644
--- a/docs/docs/configuration/object_detectors.md
+++ b/docs/docs/configuration/object_detectors.md
@@ -4,6 +4,9 @@ title: Object Detectors
 ---
 
 import CommunityBadge from '@site/src/components/CommunityBadge';
+import ConfigTabs from '@site/src/components/ConfigTabs';
+import TabItem from '@theme/TabItem';
+import NavPath from '@site/src/components/NavPath';
 import ModelConfigDropdown from '@site/src/components/ModelConfigDropdown';
 import objectDetectorsModels from '@site/data/object_detectors_models.json';
 
@@ -106,29 +109,134 @@ See [common Edge TPU troubleshooting steps](/troubleshooting/edgetpu) if the Edg
 
 ### Single USB Coral
 
-Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `usb`.
+<ConfigTabs>
+<TabItem value="ui">
+
+Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `usb`.
+
+</TabItem>
+<TabItem value="yaml">
+
+```yaml
+detectors:
+  coral:
+    type: edgetpu
+    device: usb
+```
+
+</TabItem>
+</ConfigTabs>
 
 ### Multiple USB Corals
 
-Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `usb:0` and `usb:1` as the device for each.
+<ConfigTabs>
+<TabItem value="ui">
+
+Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `usb:0` and `usb:1` as the device for each.
+
+</TabItem>
+<TabItem value="yaml">
+
+```yaml
+detectors:
+  coral1:
+    type: edgetpu
+    device: usb:0
+  coral2:
+    type: edgetpu
+    device: usb:1
+```
+
+</TabItem>
+</ConfigTabs>
 
 ### Native Coral (Dev Board)
 
 _warning: may have [compatibility issues](https://github.com/blakeblackshear/frigate/issues/1706) after `v0.9.x`_
 
-Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add**, then leave the device field empty.
+<ConfigTabs>
+<TabItem value="ui">
+
+Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then leave the device field empty.
+
+</TabItem>
+<TabItem value="yaml">
+
+```yaml
+detectors:
+  coral:
+    type: edgetpu
+    device: ""
+```
+
+</TabItem>
+</ConfigTabs>
 
 ### Single PCIE/M.2 Coral
 
-Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `pci`.
+<ConfigTabs>
+<TabItem value="ui">
+
+Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `pci`.
+
+</TabItem>
+<TabItem value="yaml">
+
+```yaml
+detectors:
+  coral:
+    type: edgetpu
+    device: pci
+```
+
+</TabItem>
+</ConfigTabs>
 
 ### Multiple PCIE/M.2 Corals
 
-Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `pci:0` and `pci:1` as the device for each.
+<ConfigTabs>
+<TabItem value="ui">
+
+Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `pci:0` and `pci:1` as the device for each.
+
+</TabItem>
+<TabItem value="yaml">
+
+```yaml
+detectors:
+  coral1:
+    type: edgetpu
+    device: pci:0
+  coral2:
+    type: edgetpu
+    device: pci:1
+```
+
+</TabItem>
+</ConfigTabs>
 
 ### Mixing Corals
 
-Navigate to **Settings > System > Detectors and model** and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors with different device types (e.g., `usb` and `pci`).
+<ConfigTabs>
+<TabItem value="ui">
+
+Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors with different device types (e.g., `usb` and `pci`).
+
+</TabItem>
+<TabItem value="yaml">
+
+```yaml
+detectors:
+  coral_usb:
+    type: edgetpu
+    device: usb
+  coral_pci:
+    type: edgetpu
+    device: pci
+```
+
+</TabItem>
+</ConfigTabs>
 
 ### Configuration
 
diff --git a/docs/src/components/ModelConfigDropdown/index.jsx b/docs/src/components/ModelConfigDropdown/index.jsx
index 548a1e26ce..3647607265 100644
--- a/docs/src/components/ModelConfigDropdown/index.jsx
+++ b/docs/src/components/ModelConfigDropdown/index.jsx
@@ -26,6 +26,10 @@ function Markdown({ children }) {
   );
 }
 
+function RecommendedBadge() {
+  return <span className={styles.recommendedBadge}>Recommended</span>;
+}
+
 /**
  * @param {{ models: Model[] }} props
  */
@@ -43,52 +47,51 @@ export default function ModelConfigDropdown({ models }) {
 
   return (
     <div className={styles.wrapper}>
-      <div
-        className={`${styles.dropdown} ${isOpen ? styles.open : ""} ${
-          hasChoices ? "" : styles.static
-        }`}
-        onClick={hasChoices ? () => setIsOpen(!isOpen) : undefined}
-      >
-        <div className={styles.dropdownContent}>
-          <span className={styles.modelName}>
-            {selectedModel.recommended && (
-              <span className={styles.recommendedBadge}>Recommended</span>
-            )}
-            {selectedModel.label}
-          </span>
-          {hasChoices && (
-            <span className={styles.arrow}>{isOpen ? "▲" : "▼"}</span>
-          )}
-        </div>
-      </div>
-
-      {isOpen && hasChoices && (
-        <div className={styles.menu}>
-          {models.map((model, index) => (
-            <div
-              key={model.key}
-              className={`${styles.menuItem} ${
-                index === selectedModelIndex ? styles.menuItemActive : ""
-              }`}
-              onClick={() => handleModelSelect(index)}
-            >
-              {model.recommended && (
-                <span className={styles.recommendedBadge}>Recommended</span>
-              )}
-              {model.label}
-            </div>
-          ))}
-        </div>
-      )}
-
       <div className={styles.panel}>
         <div className={styles.step}>
-          <h4 className={styles.stepTitle}>Step 1 — Download the model</h4>
+          <h4 className={styles.stepTitle}>Step 1 — Choose a model</h4>
+          <div
+            className={`${styles.dropdown} ${isOpen ? styles.open : ""} ${
+              hasChoices ? "" : styles.static
+            }`}
+            onClick={hasChoices ? () => setIsOpen(!isOpen) : undefined}
+          >
+            <div className={styles.dropdownContent}>
+              <span className={styles.modelName}>
+                {selectedModel.label}
+                {selectedModel.recommended && <RecommendedBadge />}
+              </span>
+              {hasChoices && (
+                <span className={styles.arrow}>{isOpen ? "▲" : "▼"}</span>
+              )}
+            </div>
+          </div>
+
+          {isOpen && hasChoices && (
+            <div className={styles.menu}>
+              {models.map((model, index) => (
+                <div
+                  key={model.key}
+                  className={`${styles.menuItem} ${
+                    index === selectedModelIndex ? styles.menuItemActive : ""
+                  }`}
+                  onClick={() => handleModelSelect(index)}
+                >
+                  {model.label}
+                  {model.recommended && <RecommendedBadge />}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.step}>
+          <h4 className={styles.stepTitle}>Step 2 — Download the model</h4>
           <Markdown>{selectedModel.download}</Markdown>
         </div>
 
         <div className={styles.step}>
-          <h4 className={styles.stepTitle}>Step 2 — Configure the detector</h4>
+          <h4 className={styles.stepTitle}>Step 3 — Configure the detector</h4>
           <ConfigTabs>
             <TabItem value="ui">
               <Markdown>{selectedModel.ui}</Markdown>
diff --git a/docs/src/components/ModelConfigDropdown/styles.module.css b/docs/src/components/ModelConfigDropdown/styles.module.css
index 20048121ed..bf977dc445 100644
--- a/docs/src/components/ModelConfigDropdown/styles.module.css
+++ b/docs/src/components/ModelConfigDropdown/styles.module.css
@@ -193,7 +193,7 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: var(--ifm-color-primary);
+  color: var(--ifm-font-color-base);
 }
 
 /* Rendered markdown (download + Frigate UI instructions). */