src/App.vue

@@ -49,6 +49,12 @@ watch(colorScheme, val => updateColorScheme(val))
     flex-grow: 1;
 }
 
+@media (max-width: 48rem) {
+    .main-content {
+        --main-content-padding-x: 15px;
+    }
+}
+
 #app-wrapper {
     min-height: 100vh;
     display: flex;

src/assets/icons/magnifying-glass.svg

@@ -0,0 +1,36 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+        stroke="currentColor"
+        stroke-width="3"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M2 22 l8 -8"
+    />
+    <circle
+        stroke="currentColor"
+        stroke-width="3"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        cx="15.5"
+        cy="8.5"
+        r="6.5"
+    />
+</svg>

src/features/search/components/Searchbar.vue

@@ -15,6 +15,8 @@ limitations under the License.
 -->
 
 <script setup>
+import Icon from '@/features/icons/components/Icon.vue';
+
 const searchQuery = defineModel();
 
 import { useRouter } from 'vue-router';
@@ -45,7 +47,14 @@ const submitSearch = function () {
                 :placeholder="t('search.searchBar.placeholder')"
                 required
                 />
-                <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
+                <button
+                    type="submit"
+                    class="search-button"
+                    :title="t('search.searchBar.submit')"
+                    :aria-label="t('search.searchBar.submit')"
+                >
+                    <Icon class="search-icon" name="magnifying-glass" size="1.1em" />
+                </button>
             </div>
         </form>
     </div>
@@ -79,6 +88,7 @@ const submitSearch = function () {
 .search-button {
     font-size: 1rem;
     height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
+    width: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
     border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y));
     border: none;
     padding: var(--submit-button-padding-y) 20px;
@@ -86,6 +96,13 @@ const submitSearch = function () {
     color: var(--white);
     cursor: pointer;
     white-space: nowrap;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.search-button .search-icon {
+    filter: invert(1);
 }
 
 .search-button:hover {

vite.config.js

@@ -21,6 +21,9 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 
 // https://vite.dev/config/
 export default defineConfig({
+  build: {
+    target: 'es2020'
+  },
   plugins: [
     vue(),
     createHtmlPlugin({