diff --git a/docs/app/views/pages/search.html.erb b/docs/app/views/pages/search.html.erb
index 81551c2e82..c8b286e753 100644
--- a/docs/app/views/pages/search.html.erb
+++ b/docs/app/views/pages/search.html.erb
@@ -5,21 +5,25 @@
   <h1>Component Search</h1>
 <% end %>
 <%= form_tag(pages_search_path, method: :get) do %>
-  <%= sage_component SageToolbar, {} do %>
-    <%= sage_component SageToolbarGroup, {} do %>
+    <%= sage_component SageInputGroup, {
+      group_id: "site_search",
+      has_button: true,
+      group_buttons: [{
+        icon: "sage-btn--icon-left-search",
+        text: "Search",
+        text_hidden: true,
+        tooltip: false,
+      }],
+      input_type: "search",
+    } do %>
       <%= sage_component SageFormInput, {
         id: "search",
-        label_text: "Search for a component",
-        placeholder: "Search Sage Components",
+        input_type: "search",
+        label_text: "Search Sage",
+        placeholder: "Search components",
         value: params[:search] || "",
       } %>
-      <%= sage_component SageButton, {
-        value: "Search",
-        style: "primary",
-        attributes: { type: "submit" }
-      } %>
     <% end %>
-  <% end %>
 <% end %>
 <% if @search.present? %>
   <%= sage_component SageCard, { spacer: { top: :xl }} do %>