diff --git a/lib/pleroma/web/templates/layout/static_fe.html.eex b/lib/pleroma/web/templates/layout/static_fe.html.eex
index 0bd2bd59f..0e0cbb92e 100644
--- a/lib/pleroma/web/templates/layout/static_fe.html.eex
+++ b/lib/pleroma/web/templates/layout/static_fe.html.eex
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="/static-fe/static-fe.css">
   </head>
   <body>
+	<div class="background-image"></div>
     <nav>
       <div class="inner-nav">
         <a class="site-brand" href="/">
diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css
index 97d6b211e..16b8b34c1 100644
--- a/priv/static/static-fe/static-fe.css
+++ b/priv/static/static-fe/static-fe.css
@@ -1,6 +1,7 @@
 /* pleroma-light and pleroma-dark themes from pleroma-fe */
 :root {
     --alertNeutral: rgba(185, 185, 186, 0.5);
+	--wallpaper: rgba(11, 16, 23, 1);
     --alertNeutralText: rgba(255, 255, 255, 1);
     --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
 
@@ -30,27 +31,45 @@ :root {
 }
 
 html {
-    height: 100%
+    height: 100%;
+	overflow-y: auto;
 }
 
 body {
+	overflow: auto;
     margin: 0;
     height: 100%;
-    background-image: var(--background-image);
     font-family: sans-serif;
     color: var(--text);
 }
 
+.background-image {
+	position: fixed;
+    height: 100%;
+    top: 3.5em;
+    z-index: -1000;
+    left: 0;
+    right: -20px;
+    background-size: cover;
+    background-repeat: no-repeat;
+	background-color: var(--wallpaper);
+    background-image: var(--background-image);
+    background-position: 50%;
+}
+
 a {
     text-decoration: none;
     color: var(--link);
 }
 
 nav {
+	position: sticky;
+	top: 0;
     width: 100%;
     height: 3.5em;
     background-color: var(--topBar);
     box-shadow: var(--topBarShadow);
+	z-index: 2000;
 }
 
 .inner-nav {
