diff --git a/public/screenshots/heaventaker.png b/public/screenshots/heaventaker.png
new file mode 100644
index 0000000..f3f6105
Binary files /dev/null and b/public/screenshots/heaventaker.png differ
diff --git a/public/screenshots/mangadex.jfif b/public/screenshots/mangadex.jfif
new file mode 100644
index 0000000..61046c1
Binary files /dev/null and b/public/screenshots/mangadex.jfif differ
diff --git a/src/App.svelte b/src/App.svelte
index c1ddd6e..58b6650 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -159,10 +159,12 @@
 		position: sticky;
 		top: 0;
 		left: 0;
+		z-index: 99;
 		/*width: calc(100vw - 15px);*/
 		max-width: 1920px;
 		margin: 0 auto 30px auto;
-		background: white;
+		background: rgba(255,255,255, 0.2);
+		backdrop-filter: blur(10px);
 	}
 	@media (max-width: 400px) {
 		.bar {
@@ -170,7 +172,7 @@
 		}
 	}
 	.dark.bar {
-		background: rgb(28, 28, 33);
+		background: rgba(28, 28, 33, 0.2);
 	}
 	.bar h3 {
 		font-size: 18px;
diff --git a/src/components/bar.svelte b/src/components/bar.svelte
index 833d144..5b2a9a1 100644
--- a/src/components/bar.svelte
+++ b/src/components/bar.svelte
@@ -6,14 +6,14 @@
     nav {
         width: calc(100% - 20px);
         border-radius: 5px;
-        background: white;
+		background: rgba(255,255,255, 0.2);
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 10px;
     }
     :global(.dark nav.bar-component) {
-        background: rgb(28, 28, 33);
+		background: rgba(28, 28, 33, 0.2);
     }
     :global(nav.bar-component > *) {
         margin: 10px;