diff --git a/site/src/jsMain/kotlin/me/luki/website/styles/SocialButtonStyle.kt b/site/src/jsMain/kotlin/me/luki/website/styles/SocialButtonStyle.kt
index 1ae35df..b7013e1 100644
--- a/site/src/jsMain/kotlin/me/luki/website/styles/SocialButtonStyle.kt
+++ b/site/src/jsMain/kotlin/me/luki/website/styles/SocialButtonStyle.kt
@@ -1,11 +1,17 @@
 package me.luki.website.styles
 
+import com.varabyte.kobweb.compose.css.Transition
 import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.modifiers.height
 import com.varabyte.kobweb.compose.ui.modifiers.scale
+import com.varabyte.kobweb.compose.ui.modifiers.transition
 import com.varabyte.kobweb.compose.ui.modifiers.width
 import com.varabyte.kobweb.silk.style.CssStyle
+import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint
+import com.varabyte.kobweb.silk.style.plus
 import com.varabyte.kobweb.silk.style.selectors.hover
+import org.jetbrains.compose.web.css.AnimationTimingFunction
+import org.jetbrains.compose.web.css.ms
 import org.jetbrains.compose.web.css.px
 
 val SocialButtonStyle = CssStyle(
@@ -13,7 +19,23 @@ val SocialButtonStyle = CssStyle(
         .height(28.px)
         .width(28.px)
 ) {
-    hover {
-        Modifier.scale(1.1)
+    base {
+        Modifier
+            .transition(
+                Transition.all(
+                    duration = 200.ms,
+                    timingFunction = AnimationTimingFunction.EaseInOut
+                )
+            )
+    }
+    (Breakpoint.MD + hover) {
+        Modifier
+            .scale(1.2)
+            .transition(
+                Transition.all(
+                    duration = 200.ms,
+                    timingFunction = AnimationTimingFunction.EaseInOut
+                )
+            )
     }
 }