diff --git a/public/assets/css/partials/footer.css b/public/assets/css/partials/footer.css
index ef182b5..b998904 100644
--- a/public/assets/css/partials/footer.css
+++ b/public/assets/css/partials/footer.css
@@ -45,11 +45,15 @@ footer a:hover {
 	color: var(--text-shade-3);
 	text-decoration: underline;
 }
+footer div.discord-server-card-wrapper {
+	z-index: 2;
+	justify-self: end;
+}
 footer div.discord-server-card {
+	position: relative;
 	background: var(--bg-shade-2);
 	border-radius: 12px;
 	padding: 30px 90px 30px 36px;
-	justify-self: end;
 }
 footer div.discord-server-card h1 {
 	font-size: 25px;
@@ -78,6 +82,17 @@ footer div.discord-server-card svg {
 	stroke-width: 3px;
 	margin-right: 4px;
 }
+footer div.discord-server-card::after {
+	content: "";
+	position: absolute;
+	top: -120px;
+	right: 0px;
+	width: 192px;
+	height: 192px;
+	background: no-repeat center/cover url(/assets/images/bandwidth.png);
+	transform: rotate(-19deg);
+	z-index: -1;
+}
 
 @media screen and (max-width: 900px) {
 	footer {
@@ -88,11 +103,21 @@ footer div.discord-server-card svg {
 	footer div {
 		justify-self: center;
 	}
-	footer div.discord-server-card {
+	footer div.discord-server-card-wrapper {
 		grid-column: 1 / span 4;
-		width: calc(100% - 126px);
+		width: 100%;
 		justify-self: normal;
 	}
+	footer div.discord-server-card::after {
+		bottom: -72px;
+		top: unset;
+		z-index: 0;
+	}
+	footer div.discord-server-card {
+		box-sizing: border-box;
+		width: 100%;
+		overflow: hidden;
+	}
 }
 
 @media screen and (max-width: 580px) {
@@ -103,9 +128,22 @@ footer div.discord-server-card svg {
 	footer div {
 		justify-self: start;
 	}
-	footer div.discord-server-card {
+	footer div.discord-server-card-wrapper {
 		grid-column: 1 / span 1;
+	}
+	footer div.discord-server-card {
 		padding: 30px;
-		width: calc(100% - 60px);
+		overflow: visible;
+	}
+	footer div.discord-server-card::after {
+		bottom: unset;
+		top: -120px;
+		z-index: -1;
+	}
+}
+
+@media screen and (max-width: 320px) {
+	footer div.discord-server-card::after {
+		display: none;
 	}
 }
diff --git a/public/assets/images/bandwidth.png b/public/assets/images/bandwidth.png
new file mode 100644
index 0000000..f100688
Binary files /dev/null and b/public/assets/images/bandwidth.png differ
diff --git a/views/partials/footer.handlebars b/views/partials/footer.handlebars
index e27ae32..f041bf9 100644
--- a/views/partials/footer.handlebars
+++ b/views/partials/footer.handlebars
@@ -41,15 +41,17 @@
 		<a href="/blog">{{ localeHelper locale "nav.blog" }}</a>
 		<a href="/account">{{ localeHelper locale "nav.account" }}</a>
 	</div>
-	<div class="discord-server-card">
-		<h1>{{ localeHelper locale "footer.widget.captions.0" }}</h1>
-		<h2>{{ localeHelper locale "footer.widget.captions.1" }}</h2>
-		<a href="https://invite.gg/pretendo">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
-				<line x1="5" y1="12" x2="19" y2="12"></line>
-				<polyline points="12 5 19 12 12 19"></polyline>
-			</svg>
-			{{ localeHelper locale "footer.widget.button" }}
-		</a>
+	<div class="discord-server-card-wrapper">
+		<div class="discord-server-card">
+			<h1>{{ localeHelper locale "footer.widget.captions.0" }}</h1>
+			<h2>{{ localeHelper locale "footer.widget.captions.1" }}</h2>
+			<a href="https://invite.gg/pretendo">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
+					<line x1="5" y1="12" x2="19" y2="12"></line>
+					<polyline points="12 5 19 12 12 19"></polyline>
+				</svg>
+				{{ localeHelper locale "footer.widget.button" }}
+			</a>
+		</div>
 	</div>
 </footer>