diff --git a/src/components/atoms/Footer.tsx b/src/components/atoms/Footer.tsx
index c682cd8..dfcd460 100644
--- a/src/components/atoms/Footer.tsx
+++ b/src/components/atoms/Footer.tsx
@@ -1,16 +1,19 @@
 import * as React from "react"
 import { ReactNode } from "react"
 import { Box, useTheme } from "@mui/material"
+import styled from "@emotion/styled"
 
 export type FooterProps = {
+  className?: string
   children: ReactNode
 }
 
-export const Footer = ({ children }: FooterProps) => {
+export const Footer = styled(({ className, children }: FooterProps) => {
   const theme = useTheme()
 
   return (
     <Box
+      {...{ className }}
       position="fixed"
       display="flex"
       bottom={0}
@@ -22,4 +25,9 @@ export const Footer = ({ children }: FooterProps) => {
       {children}
     </Box>
   )
-}
+})`
+  > a {
+    display: flex;
+    align-items: center;
+  }
+`
diff --git a/src/components/organisms/Layout.tsx b/src/components/organisms/Layout.tsx
index 3c31b74..9c6e875 100644
--- a/src/components/organisms/Layout.tsx
+++ b/src/components/organisms/Layout.tsx
@@ -76,7 +76,7 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
       <Footer>
         <Tooltip title="GitLab">
           <Link rel="me" href="https://gitlab.com/felschr">
-            <FaGitlab />
+            <FaGitlab size="1.25em" />
           </Link>
         </Tooltip>
         <Tooltip title="GitHub">
@@ -86,7 +86,7 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
         </Tooltip>
         <Tooltip title="Mastodon">
           <Link rel="me" href="https://todon.eu/@felschr">
-            <BsMastodon />
+            <BsMastodon size="1.25em" />
           </Link>
         </Tooltip>
         <Tooltip title="LinkedIn">