diff --git a/templates/template.html.twig b/templates/template.html.twig
index 1415340..2e01253 100644
--- a/templates/template.html.twig
+++ b/templates/template.html.twig
@@ -28,9 +28,11 @@
                     <a class="nav-link {% if app.request.pathinfo == path('app_discontinued') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_discontinued') }}">Discontinued <span class="badge text-bg-secondary">{{ discontinuedCount() }}</span></a>
                 </li>
             </ul>
-            <form class="d-flex col-lg-6 col-sm-8" role="search" action="{{ path('app_search') }}">
-                <input class="form-control me-2" type="search" name="search" placeholder="Search term eg. 36v or RCS18X" value="{{ search|default('') }}" aria-label="Search">
+
+            <form class="form-floating d-flex col-lg-6 col-sm-8" role="search" action="{{ path('app_search') }}">
+                <input class="form-control me-2 form-control-sm" type="search" id="floatingInputValue" name="search" placeholder="Search term eg. 36v or RCS18X" value="{{ search|default('') }}">
                 <button class="btn btn-outline-success" type="submit">Search</button>
+                <label for="floatingInputValue">Search term eg. 36v or RCS18X</label>
             </form>
         </div>
     </div>