diff --git a/web/components/ui/SocialLinks/SocialLinks.module.scss b/web/components/ui/SocialLinks/SocialLinks.module.scss
index c13b69fa8..446811404 100644
--- a/web/components/ui/SocialLinks/SocialLinks.module.scss
+++ b/web/components/ui/SocialLinks/SocialLinks.module.scss
@@ -1,10 +1,17 @@
 .link {
   width: 30px;
-  margin-right: 16px;
+}
+
+.linkBackground {
+  background-color: var(--theme-color-components-content-background);
+  border-radius: 50%;
+  padding: 8px;
 }
 
 .links {
   display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   margin-top: 5px;
diff --git a/web/components/ui/SocialLinks/SocialLinks.tsx b/web/components/ui/SocialLinks/SocialLinks.tsx
index de7922592..82d7f6fb0 100644
--- a/web/components/ui/SocialLinks/SocialLinks.tsx
+++ b/web/components/ui/SocialLinks/SocialLinks.tsx
@@ -30,7 +30,8 @@ export const SocialLinks: FC<SocialLinksProps> = ({ links }) => {
           <a
             key={link.platform}
             href={link.url}
-            className={styles.link}
+            className={styles.linkBackground}
+            title={link.platform}
             target="_blank"
             // eslint-disable-next-line react/no-invalid-html-attribute
             rel="noreferrer me"