diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index dea2833..6503111 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,60 +1,67 @@
-		<footer class="footer">
-			<div class="container">
-				<div class="has-text-centered">
-					<p>
-						Copyright &copy; {{ now.Year }}
-						<a href="{{ .Site.Params.website }}">{{ .Site.Params.author }}</a>.
-						All rights reserved. Made with ♥️ and <a href="https://gohugo.io">Hugo</a>.
-						{{/* The site urls are hard coded because both sites are located at the same path but the base website url is different on the docs page */}}
-						<a href="https://vikunja.io/contact/">Contact</a> |
-						<a href="https://vikunja.io/privacy/">Privacy Policy</a>
-					</p>
-					<p>
-						<a href="https://riot.im/app/#/room/!dCRiCiLaCCFVNlDnYs:matrix.org?via=matrix.org">
-							<img src="https://img.shields.io/badge/chat-on%20matrix.org-brightgreen" alt="Chat on matrix.org"/>
-						</a>
-					</p>
-{{/*
-	Commented out until we actually have a multi-language website.
-					<p>
-						{{ $lang := .Lang }}{{ $base := .Site.BaseURL }}{{ range .Site.Languages }}
-						<a class="nav-link" href="{{ $base }}{{ .Lang }}">{{ .LanguageName }}</a>
-						{{ end }}
-					</p>
-*/}}
-				</div>
-			</div>
-		</footer>
+<footer class="footer">
+	<div class="container">
+		<div class="has-text-centered">
+			<p>
+				Copyright &copy; {{ now.Year }}
+				<a href="{{ .Site.Params.website }}">{{ .Site.Params.author }}</a>.
+				All rights reserved. Made with ♥️ and <a href="https://gohugo.io">Hugo</a>.
+				{{/* The site urls are hard coded because both sites are located at the same path but the base website
+				url is different on the docs page */}}
+				<a href="https://vikunja.io/contact/">Contact</a> |
+				<a href="https://vikunja.io/privacy/">Privacy Policy</a>
+			</p>
+			<p class="footer-buttons">
+				<a href="https://riot.im/app/#/room/!dCRiCiLaCCFVNlDnYs:matrix.org?via=matrix.org">
+					<img src="https://img.shields.io/badge/chat-on%20matrix.org-brightgreen" alt="Chat on matrix.org"/>
+				</a>
+				<a target="_blank" href="https://www.buymeacoffee.com/kolaente" class="button coffe is-primary">
+					<span class="icon is-small">
+						<img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee">
+					</span>
+					<span>Buy Me A Coffe</span>
+				</a>
+			</p>
+			{{/*
+			Commented out until we actually have a multi-language website.
+			<p>
+				{{ $lang := .Lang }}{{ $base := .Site.BaseURL }}{{ range .Site.Languages }}
+				<a class="nav-link" href="{{ $base }}{{ .Lang }}">{{ .LanguageName }}</a>
+				{{ end }}
+			</p>
+			*/}}
+		</div>
+	</div>
+</footer>
 
-		<script>
-            document.addEventListener('DOMContentLoaded', function () {
+<script>
+	document.addEventListener('DOMContentLoaded', function () {
 
-                // Get all "navbar-burger" elements
-                var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+		// Get all "navbar-burger" elements
+		var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
 
-                // Check if there are any navbar burgers
-                if ($navbarBurgers.length > 0) {
+		// Check if there are any navbar burgers
+		if ($navbarBurgers.length > 0) {
 
-                    // Add a click event on each of them
-                    $navbarBurgers.forEach(function ($el) {
-                        $el.addEventListener('click', function () {
+			// Add a click event on each of them
+			$navbarBurgers.forEach(function ($el) {
+				$el.addEventListener('click', function () {
 
-                            // Get the target from the "data-target" attribute
-                            var target = $el.dataset.target;
-                            var $target = document.getElementById(target);
+					// Get the target from the "data-target" attribute
+					var target = $el.dataset.target;
+					var $target = document.getElementById(target);
 
-                            // Toggle the class on both the "navbar-burger" and the "navbar-menu"
-                            $el.classList.toggle('is-active');
-                            $target.classList.toggle('is-active');
+					// Toggle the class on both the "navbar-burger" and the "navbar-menu"
+					$el.classList.toggle('is-active');
+					$target.classList.toggle('is-active');
 
-                            document.getElementById('navbar-background').classList.toggle('is-active');
-                        });
-                    });
-                }
+					document.getElementById('navbar-background').classList.toggle('is-active');
+				});
+			});
+		}
 
-            });
-		</script>
+	});
+</script>
 
-		{{ partial "fathom-tracking.html" . }}
-		</body>
+{{ partial "fathom-tracking.html" . }}
+</body>
 </html>
diff --git a/src/_theme.scss b/src/_theme.scss
index 81bac6e..cf7384a 100644
--- a/src/_theme.scss
+++ b/src/_theme.scss
@@ -72,6 +72,15 @@
       box-shadow: none;
     }
   }
+
+  &.coffe {
+    padding: 1em 1.5em;
+    height: auto;
+
+    // Shadow from the original button
+    box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;
+    -webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
+  }
 }
 
 .input,
@@ -249,3 +258,14 @@ h1,h2,h3,h4,h5,h6{
     }
   }
 }
+
+.footer-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: .5em;
+
+  *:not(:last-child) {
+    margin-right: .5em;
+  }
+}
diff --git a/src/main.scss b/src/main.scss
index b71ebe9..bc36556 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -279,4 +279,4 @@ h1, h2, h3, h4, h5, h6 {
       color: lighten(#000, 70%);
     }
   }
-}
\ No newline at end of file
+}