diff --git a/src/components/search.svelte b/src/components/search.svelte
index 8bd3e6d..ec9582a 100644
--- a/src/components/search.svelte
+++ b/src/components/search.svelte
@@ -1,13 +1,21 @@
 <script lang="ts">
   export let searchTerm: string;
-  export let placeholder: string = "Search...";
+  export let placeholder: string = 'Search...';
+  import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
 </script>
 
-<input
-  type="text"
-  placeholder={placeholder}
-  autocomplete="off"
-  class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
-  bind:value={searchTerm}
-  on:input
-/>
+<div class="relative w-full">
+  <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
+    <div class="pointer-events-none">
+      <MagnifyingGlass size={18} weight={searchTerm ? 'duotone' : 'regular'} />
+    </div>
+  </div>
+  <input
+    type="text"
+    {placeholder}
+    autocomplete="off"
+    class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 pl-10 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
+    bind:value={searchTerm}
+    on:input
+  />
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fe93395..28950d6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -75,7 +75,7 @@
         target="_blank"
         class="mt-5 flex items-center space-x-2 text-neutral-400 transition-all duration-100 hover:text-white"
       >
-        <Heart color="#991b1b" size={18} />
+        <Heart color="#991b1b" size={18} weight={'duotone'} />
         <div class="flex items-center space-x-1">
           <p class="text-muted text-sm">Created by pheralb</p>
           <ArrowUpRight size={12} />