diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx
index e1d816f6..6c384290 100644
--- a/src/components/common/ServerHeader.tsx
+++ b/src/components/common/ServerHeader.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
 import { ServerPermission } from "revolt.js/dist/api/permissions";
 import { Server } from "revolt.js/dist/maps/Servers";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
 
@@ -17,14 +17,30 @@ interface Props {
     server: Server;
 }
 
-const ServerBanner = styled.div`
+interface Props {
+    background?: boolean;
+}
+
+const ServerBanner = styled.div<Props>`
     background-color: var(--secondary-header);
-    //height: 120px; //USE IF SERVER BANNER IS APPLIED
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     justify-content: end;
 
+    ${(props) =>
+        props.background &&
+        css`
+            height: 120px;
+            .container {
+                background: linear-gradient(
+                    0deg,
+                    var(--secondary-background),
+                    transparent
+                );
+            }
+        `}
+
     .container {
         height: 48px;
         display: flex;
@@ -49,76 +65,80 @@ export default observer(({ server }: Props) => {
     const bannerURL = server.generateBannerURL({ width: 480 });
 
     return (
-        <div>
-            <ServerBanner>
-                <div className="container">
-                    <div>
-                        {server.flags && server.flags & 1 ? (
-                            <Tooltip
-                                content={
-                                    <Text id="app.special.server-badges.official" />
-                                }
-                                placement={"bottom-start"}>
-                                <svg width="20" height="20">
-                                    <image
-                                        xlinkHref="/assets/badges/verified.svg"
-                                        height="20"
-                                        width="20"
+        <ServerBanner
+            background={typeof bannerURL !== "undefined"}
+            style={{
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                background: bannerURL ? `url('${bannerURL}')` : undefined,
+            }}>
+            <div className="container">
+                <div>
+                    {server.flags && server.flags & 1 ? (
+                        <Tooltip
+                            content={
+                                <Text id="app.special.server-badges.official" />
+                            }
+                            placement={"bottom-start"}>
+                            <svg width="20" height="20">
+                                <image
+                                    xlinkHref="/assets/badges/verified.svg"
+                                    height="20"
+                                    width="20"
+                                />
+                                <image
+                                    xlinkHref="/assets/badges/revolt_r.svg"
+                                    height="15"
+                                    width="15"
+                                    x="2"
+                                    y="3"
+                                    style={
+                                        "justify-content: center; align-items: center; filter: brightness(0);"
+                                    }
+                                />
+                            </svg>
+                        </Tooltip>
+                    ) : undefined}
+                    {server.flags && server.flags & 2 ? (
+                        <Tooltip
+                            content={
+                                <Text id="app.special.server-badges.verified" />
+                            }
+                            placement={"bottom-start"}>
+                            <svg width="20" height="20">
+                                <image
+                                    xlinkHref="/assets/badges/verified.svg"
+                                    height="20"
+                                    width="20"
+                                />
+                                <foreignObject
+                                    x="2"
+                                    y="2"
+                                    width="15"
+                                    height="15">
+                                    <Check
+                                        size={15}
+                                        color="black"
+                                        strokeWidth={8}
                                     />
-                                    <image
-                                        xlinkHref="/assets/badges/revolt_r.svg"
-                                        height="15"
-                                        width="15"
-                                        x="2"
-                                        y="3"
-                                        style={
-                                            "justify-content: center; align-items: center; filter: brightness(0);"
-                                        }
-                                    />
-                                </svg>
-                            </Tooltip>
-                        ) : undefined}
-                        {server.flags && server.flags & 2 ? (
-                            <Tooltip
-                                content={
-                                    <Text id="app.special.server-badges.verified" />
-                                }
-                                placement={"bottom-start"}>
-                                <svg width="20" height="20">
-                                    <image
-                                        xlinkHref="/assets/badges/verified.svg"
-                                        height="20"
-                                        width="20"
-                                    />
-                                    <foreignObject
-                                        x="2"
-                                        y="2"
-                                        width="15"
-                                        height="15">
-                                        <Check
-                                            size={15}
-                                            color="black"
-                                            strokeWidth={8}
-                                        />
-                                    </foreignObject>
-                                </svg>
-                            </Tooltip>
-                        ) : undefined}
-                    </div>
-                    <div className="title">{server.name}</div>
-                    {(server.permission & ServerPermission.ManageServer) >
-                        0 && (
-                        <div className="actions">
-                            <Link to={`/server/${server._id}/settings`}>
-                                <IconButton>
-                                    <Cog size={20} />
-                                </IconButton>
-                            </Link>
-                        </div>
-                    )}
+                                </foreignObject>
+                            </svg>
+                        </Tooltip>
+                    ) : undefined}
                 </div>
-            </ServerBanner>
-        </div>
+                <div className="title">{server.name}</div>
+                {(server.permission & ServerPermission.ManageServer) > 0 && (
+                    <div className="actions">
+                        <Link to={`/server/${server._id}/settings`}>
+                            <IconButton>
+                                <Cog size={20} />
+                            </IconButton>
+                        </Link>
+                    </div>
+                )}
+            </div>
+        </ServerBanner>
         /*<Header
             borders
             placement="secondary"