diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index e34f7c3..cee0539 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -39,7 +39,7 @@
 	/>
 </div>
 
-<style>
+<style lang="scss">
 	#search {
 		/* umm dont ask */
 		position: absolute;
@@ -73,6 +73,19 @@
 		border-radius: 100px;
 		border: none;
 		background-color: var(--grey-ten);
+		outline: none;
+
+		transition: background-color 0.3s var(--bezier-one);
+		&:hover {
+			background-color: var(--grey-three);
+		}
+
+		&:focus::placeholder {
+			color: var(--accent-color);
+		}
+		&:focus {
+			background-color: var(--bg-color);
+		}
 	}
 
 	input::placeholder {
@@ -81,13 +94,4 @@
 		font-weight: 500;
 		transition: all 0.2s var(--bezier-one);
 	}
-
-	input:focus {
-		outline: none;
-	}
-
-	input:focus::placeholder {
-		outline: none;
-		color: var(--accent-color);
-	}
 </style>