diff --git a/src/button/ko/buttonEditor.html b/src/button/ko/buttonEditor.html
index 437c695e..7091f996 100644
--- a/src/button/ko/buttonEditor.html
+++ b/src/button/ko/buttonEditor.html
@@ -13,21 +13,15 @@
     </div>
 
     <div class="form-group">
-        <label for="hyperlinkSelector" class="form-label">
+        <label for="hyperlink" class="form-label">
             Link to
             <button class="btn btn-info" role="tooltip" aria-hidden="true" role="tooltip"
                 data-bind="tooltip: 'A link to be navigated on click.'"></button>
         </label>
-        <div class="input-group">
-            <input id="hyperlinkSelector" class="form-control" readonly data-bind="value: hyperlinkTitle" />
-            <button class="btn input-group-btn" aria-label="Select hyperlink"
-                data-bind="balloon: { position: 'right', component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
-                <i aria-hidden="true" class="paperbits-icon paperbits-link-69-2"></i>
-            </button>
-        </div>
+        <input-hyperlink params="{ id: 'hyperlink', hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange }"></input-hyperlink>
     </div>
 
-    <glyph-input params="{ selection: model.iconKey, onChange: onIconSelect }"></glyph-input>
+    <input-glyph params="{ selection: model.iconKey, onChange: onIconSelect }"></input-glyph>
 
     <div class="form-group">
         <label for="displayStyle" class="form-label">
diff --git a/src/dismiss-button/ko/dismissButtonEditor.html b/src/dismiss-button/ko/dismissButtonEditor.html
index 4fa5d539..1ff59ed2 100644
--- a/src/dismiss-button/ko/dismissButtonEditor.html
+++ b/src/dismiss-button/ko/dismissButtonEditor.html
@@ -27,4 +27,4 @@
         <select id="sizeStyle" class="form-control" data-bind="options: sizeStyles, value: sizeStyle, optionsText: 'displayName', optionsValue: 'key'"></select>
     </div> -->
 
-<glyph-input params="{ selection: model.iconKey, onChange: onIconSelect }"></glyph-input>
\ No newline at end of file
+<input-glyph params="{ selection: model.iconKey, onChange: onIconSelect }"></input-glyph>
\ No newline at end of file
diff --git a/src/picture/ko/pictureEditor.html b/src/picture/ko/pictureEditor.html
index 12700a3f..3d5503a1 100644
--- a/src/picture/ko/pictureEditor.html
+++ b/src/picture/ko/pictureEditor.html
@@ -27,18 +27,12 @@
     </div>
 
     <div class="form-group">
-        <label for="hyperlinkSelector" class="form-label">
+        <label for="hyperlink" class="form-label">
             Link to
             <button class="btn btn-info" role="tooltip" aria-hidden="true" role="tooltip"
                 data-bind="tooltip: 'A link to be navigated on click.'"></button>
         </label>
-        <div class="input-group">
-            <input id="hyperlinkSelector" class="form-control" readonly data-bind="value: hyperlinkTitle" />
-            <button class="btn input-group-btn" aria-label="Select hyperlink"
-                data-bind="balloon: { position: 'right', component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
-                <i aria-hidden="true" class="paperbits-icon paperbits-link-69-2"></i>
-            </button>
-        </div>
+        <input-hyperlink params="{ id: 'hyperlink', hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange }"></input-hyperlink>
     </div>
 </details>
 
diff --git a/src/workshops/hyperlinks/ko/hyperlinkSelector.html b/src/workshops/hyperlinks/ko/hyperlinkSelector.html
index f8499d3f..ab19edfe 100644
--- a/src/workshops/hyperlinks/ko/hyperlinkSelector.html
+++ b/src/workshops/hyperlinks/ko/hyperlinkSelector.html
@@ -27,11 +27,11 @@ <h1>Hyperlink</h1>
     <!-- ko if: hyperlinkProvider -->
 
     <div class="form-group">
-        <label for="hyperlink">
+        <label for="hyperlinkTitle">
             Link points to:
         </label>
         <div class="max-w300 text-overflow">
-            <b id="hyperlink" data-bind="text: $component.selection, attr: { title: selection }"></b>
+            <b id="hyperlinkTitle" data-bind="text: $component.selection, attr: { title: selection }"></b>
         </div>
     </div>
     <!-- ko if: hyperlinkProvider().hyperlinkDetailsComponentName -->