diff --git a/web/pages/social.tsx b/web/pages/social.tsx
index 20906488..c5e1ce83 100644
--- a/web/pages/social.tsx
+++ b/web/pages/social.tsx
@@ -1,26 +1,27 @@
 import {LovePage} from 'web/components/love-page'
 import {discordLink, githubRepo, redditLink, stoatLink, supportEmail, xLink} from "common/constants";
 import {GeneralButton} from "web/components/buttons/general-button";
+import clsx from "clsx";
+import {Col} from "web/components/layout/col";
 
 
 export default function Social() {
   return (
     <LovePage trackPageView={'social'}>
-      <div className="text-gray-600 dark:text-white min-h-screen p-6">
-        <div className="w-full">
-          <div className="relative py-8 mt-12 overflow-hidden">
-            <div className="relative z-10 max-w-3xl mx-auto px-4">
-              <h3 className="text-4xl font-bold text-center mt-8 mb-8">Socials</h3>
-              <GeneralButton url={discordLink} content={'Discord'}/>
-              <GeneralButton url={stoatLink} content={'Revolt / Stoat'}/>
-              <GeneralButton url={redditLink} content={'Reddit'}/>
-              <GeneralButton url={githubRepo} content={'GitHub'}/>
-              <GeneralButton url={xLink} content={'X'}/>
-              <GeneralButton url={`mailto:${supportEmail}`} content={`${supportEmail}`}/>
-            </div>
-          </div>
-        </div>
-      </div>
+      <h3 className="text-4xl font-bold text-center mt-8 mb-8">Socials</h3>
+      <Col
+        className={clsx(
+          'pb-[58px] lg:pb-0', // bottom bar padding
+          'text-ink-1000 mx-auto w-full grid grid-cols-1 gap-8 max-w-3xl sm:grid-cols-2 lg:min-h-0 lg:pt-4 mt-4',
+        )}
+      >
+        <GeneralButton url={discordLink} content={'Discord'}/>
+        <GeneralButton url={stoatLink} content={'Revolt / Stoat'}/>
+        <GeneralButton url={redditLink} content={'Reddit'}/>
+        <GeneralButton url={githubRepo} content={'GitHub'}/>
+        <GeneralButton url={xLink} content={'X'}/>
+        <GeneralButton url={`mailto:${supportEmail}`} content={`${supportEmail}`}/>
+      </Col>
     </LovePage>
   )
 }