diff --git a/web/src/admin/blueprints/BlueprintForm.ts b/web/src/admin/blueprints/BlueprintForm.ts
index 24a55ee8a..8d2f7b1f8 100644
--- a/web/src/admin/blueprints/BlueprintForm.ts
+++ b/web/src/admin/blueprints/BlueprintForm.ts
@@ -105,52 +105,16 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
             </ak-form-element-horizontal>
             <div class="pf-c-card pf-m-selectable pf-m-selected">
                 <div class="pf-c-card__body">
-                    <div class="pf-c-toggle-group">
-                        <div class="pf-c-toggle-group__item">
-                            <button
-                                class="pf-c-toggle-group__button ${this.source ===
-                                blueprintSource.file
-                                    ? "pf-m-selected"
-                                    : ""}"
-                                type="button"
-                                @click=${() => {
-                                    this.source = blueprintSource.file;
-                                }}
-                            >
-                                <span class="pf-c-toggle-group__text">${msg("Local path")}</span>
-                            </button>
-                        </div>
-                        <div class="pf-c-divider pf-m-vertical" role="separator"></div>
-                        <div class="pf-c-toggle-group__item">
-                            <button
-                                class="pf-c-toggle-group__button ${this.source ===
-                                blueprintSource.oci
-                                    ? "pf-m-selected"
-                                    : ""}"
-                                type="button"
-                                @click=${() => {
-                                    this.source = blueprintSource.oci;
-                                }}
-                            >
-                                <span class="pf-c-toggle-group__text">${msg("OCI Registry")}</span>
-                            </button>
-                        </div>
-                        <div class="pf-c-divider pf-m-vertical" role="separator"></div>
-                        <div class="pf-c-toggle-group__item">
-                            <button
-                                class="pf-c-toggle-group__button ${this.source ===
-                                blueprintSource.internal
-                                    ? "pf-m-selected"
-                                    : ""}"
-                                type="button"
-                                @click=${() => {
-                                    this.source = blueprintSource.internal;
-                                }}
-                            >
-                                <span class="pf-c-toggle-group__text">${msg("Internal")}</span>
-                            </button>
-                        </div>
-                    </div>
+                    <ak-toggle-group
+                        value=${this.source}
+                        @ak-toggle=${(ev: CustomEvent<{ value: blueprintSource }>) => {
+                            this.source = ev.detail.value;
+                        }}
+                    >
+                        <option value=${blueprintSource.file}>${msg("Local path")}</option>
+                        <option value=${blueprintSource.oci}>${msg("OCI Registry")}</option>
+                        <option value=${blueprintSource.internal}>${msg("Internal")}</option>
+                    </ak-toggle-group>
                 </div>
                 <div class="pf-c-card__footer">
                     ${this.source === blueprintSource.file