diff --git a/site/src/components/SiteSearch.svelte b/site/src/components/SiteSearch.svelte
index 407816263a..1db8fcf607 100644
--- a/site/src/components/SiteSearch.svelte
+++ b/site/src/components/SiteSearch.svelte
@@ -1,21 +1,30 @@
 <script>
 	import { writable } from 'svelte/store';
+	import { fade, fly} from 'svelte/transition';
 
 	export let showing = false;
 </script>
 
 {#if showing}
-	<div class="search"></div>
+	<div class="cover background" on:click={() => showing = false} transition:fade></div>
+	<div class="cover search" transition:fly={{x: 400}}></div>
 {/if}
 
 <style>
-	.search {
+	.cover {
 		position: fixed;
 		top: 0;
 		right: 0;
+		left: 0;
 		bottom: 0;
+		z-index: 100;
+	}
+	.background {
+		background: rgba(0, 0, 0, 0.6);
+	}
+	.search {
+		left:unset;
 		width: 385px;
 		background: var(--back);
-		z-index: 100;
 	}
 </style>