Did it via flexbox + position absolute of the searchbar. Realized that that everything is a little bigger on the dummy than i assumed it was due to 90% scaling in view mode, but seems fine

frontend/src/lib/components/header.svelte

@@ -20,11 +20,8 @@
     <a class="header__link" href="/blog">Blog</a>
     <a class="header__link" href="/services">Services</a>
 
-
+    <Spacer type="horizontal"/>
-    <Spacer type="right"/>
+    <Searchbar id="searchbar"/>
-    <Searchbar/>
-
-    <Spacer type="left"/>
 
     <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
     <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
@@ -34,11 +31,13 @@
 <style>
     .header {
         display: flex;
+        justify-content: space-evenly;
         align-items: center;
 
         gap: 20px;
         padding: 5px 20px 5px 20px;
 
+        height: 74px;
         background-color: var(--col_panel);
         box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.3);
     }

frontend/src/lib/components/icon.svelte

@@ -1,15 +1,18 @@
+<!-- FIXME: deal with this mess in style property. You can't do all that right in your HTML -->
+
 <script>
     export let image = "";
-    export let onclick = () => {};
+    export let onclick;
     export let color = "var(--col_text_panel)";
     export let size = "25px";
 </script>
 
-<input class="icon" type="button" value="" style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" on:click={onclick}>
+<input class="icon" type="button" value="" 
+style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" 
+on:click={onclick ? onclick : null}>
 
 <style>
     .icon {
-        cursor: pointer;
         background-color: var(--color);
         object-fit: contain;
         -webkit-mask-image: var(--image);
@@ -19,4 +22,11 @@
         height: var(--size);
         width: var(--size);
     }
+
+    .clickable {
+        cursor: pointer;
+    }
+    .clickable:hover {
+        background-color: var(--col_text_hint);
+    }
 </style>

frontend/src/lib/components/searchbar.svelte

@@ -11,21 +11,28 @@
 <style>
     .searchbar {
 
+        position: absolute;
         display: flex;
         align-items: center;
 
         background-color: var(--col_panel_field);
         border-radius: 30px;
 
+
+        height: 36px;
         padding: 10px;
+        margin-inline: auto auto;
     }
 
+    .searchbar__icon {
+        margin: 9px;
+    }
     .searchbar__input {
         border: none;
         background-color: transparent;
         color: var(--col_text_panel);
 
-        font-size: 18px;
+        font-size: 16px;
     }
 
     .searchbar__input:focus {