diff --git a/ui/src/pages/post/Post.css b/ui/src/pages/post/Post.css
index 3fbe2d5..b181bc2 100644
--- a/ui/src/pages/post/Post.css
+++ b/ui/src/pages/post/Post.css
@@ -15,6 +15,8 @@
         }
 
         .post__body {
+            @apply mb-12;
+
             .post__body--description {
                 @apply mb-4 border-y-2 py-4;
 
@@ -27,6 +29,10 @@
 
         .post__footer {
             margin: 0 auto;
+
+            .post__footer--contact-button {
+                @apply mb-4 px-8 py-4 border-theme-l-7 bg-theme-l-7 rounded-xl text-grey-900 font-bold inline-flex cursor-pointer;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/ui/src/pages/post/components/DiscordMessageButton.tsx b/ui/src/pages/post/components/DiscordMessageButton.tsx
index 29f0bc4..14191e6 100644
--- a/ui/src/pages/post/components/DiscordMessageButton.tsx
+++ b/ui/src/pages/post/components/DiscordMessageButton.tsx
@@ -11,13 +11,12 @@ export const DiscordMessageButton: React.FC<{
     isLoggedIn,
 }) => {
     return (
-        <span className="mb-6 px-6 py-2 border-theme-l-7 bg-theme-l-7 rounded-xl text-grey-900 font-bold inline-flex cursor-pointer">
+        <span className="post__footer--contact-button">
             <a
                 target="_blank"
                 rel="noreferrer"
                 href={isLoggedIn ? `https://discord.com/users/${authorId}` : undefined}
                 onClick={!isLoggedIn ? login : undefined}
-                className="text-sm"
             >
                 Message {author} on Discord{' '} {!isLoggedIn && <>(Log in to continue)</>}
             </a>
diff --git a/ui/src/pages/post/components/DiscordPingButton.tsx b/ui/src/pages/post/components/DiscordPingButton.tsx
index b11ae20..0c37072 100644
--- a/ui/src/pages/post/components/DiscordPingButton.tsx
+++ b/ui/src/pages/post/components/DiscordPingButton.tsx
@@ -11,7 +11,7 @@ export const DiscordPingButton: React.FC<{
 }) => {
     return (
         <>
-            <p className="mb-2">{message}</p>
+            <p className="mb-4">{message}</p>
             <span className="mb-6 p-2 rounded inline-flex cursor-pointer rounded-xl border border-theme-l-7 text-theme-l-7">
                 <a
                     target="_blank"
diff --git a/ui/src/pages/post/components/JoinDiscordButton.tsx b/ui/src/pages/post/components/JoinDiscordButton.tsx
index 0cfd400..6645290 100644
--- a/ui/src/pages/post/components/JoinDiscordButton.tsx
+++ b/ui/src/pages/post/components/JoinDiscordButton.tsx
@@ -1,12 +1,7 @@
 export const JoinDiscordButton = () => {
     return (
-        <span className="mb-6 px-6 py-2 border-theme-l-7 bg-theme-l-7 rounded-xl text-grey-900 font-bold inline-flex cursor-pointer">
-            <a
-                target="_blank"
-                rel="noreferrer"
-                href={import.meta.env.VITE_DISCORD_INVITE_URL}
-                className="text-sm"
-            >
+        <span className="post__footer--contact-button">
+            <a target="_blank" rel="noreferrer" href={import.meta.env.VITE_DISCORD_INVITE_URL} className="text-sm">
                 {`Join the ${import.meta.env.VITE_DISCORD_NAME} server to send messages to other jammers!`}
             </a>
         </span >