diff --git a/src/app/(public)/blogs/[id]/components/IntroSection.tsx b/src/app/(public)/blogs/[id]/components/IntroSection.tsx
index 8e50dc0..758dc6f 100644
--- a/src/app/(public)/blogs/[id]/components/IntroSection.tsx
+++ b/src/app/(public)/blogs/[id]/components/IntroSection.tsx
@@ -54,6 +54,7 @@ const HeaderContainer = styled(Box)(({ theme }) => ({
     alignItems: 'flex-start',
     gap: theme.spacing(1),
     marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(2),
   },
 }));
 
@@ -83,8 +84,8 @@ const AvatarContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   [theme.breakpoints.down('md')]: {
-    width: '60px',
-    height: '60px',
+    width: '40px',
+    height: '40px',
     borderRadius: '50%',
     backgroundColor: '#f5f5f5',
     overflow: 'hidden',
diff --git a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx
index 790fb97..aefc8ab 100644
--- a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx
+++ b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx
@@ -35,22 +35,48 @@ const StyledLabelWrapper = styled(Box)(({ theme }) => ({
 const StyledIconRow = styled(Box)(({ theme }) => ({
   display: 'flex',
   gap: theme.spacing(1),
+
+  '& > :nth-of-type(-n+2)': {
+    borderRadius: 8,
+    padding: theme.spacing(0.5, 1),
+    overflow: 'hidden',
+  },
+  '& > :nth-of-type(-n+2) .MuiTouchRipple-root': {
+    borderRadius: 8,
+  },
+
+  '& > :nth-of-type(-n+2) .MuiSvgIcon-root': {
+    borderRadius: 6,
+    overflow: 'hidden',
+  },
+
   [theme.breakpoints.down('md')]: {
     gap: theme.spacing(0.5),
     justifyContent: 'flex-end',
+    '& > :nth-of-type(-n+2)': {
+      borderRadius: 8,
+      padding: theme.spacing(0.8),
+    },
+    '& > :nth-of-type(-n+2) .MuiTouchRipple-root': {
+      borderRadius: 8,
+    },
   },
 }));
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
   color: theme.palette.common.black,
-  padding: theme.spacing(1),
+  padding: theme.spacing(0.5, 1),
   '&:hover': {
     backgroundColor: 'rgba(0, 0, 0, 0.04)',
   },
   [theme.breakpoints.down('md')]: {
-    padding: theme.spacing(0.5),
+    padding: theme.spacing(0.8),
     '& .MuiSvgIcon-root': {
-      fontSize: 22,
+      fontSize: 24,
+      '& path': {
+        transform: 'scale(1.3)',
+        transformOrigin: 'center',
+      },
     },
     '& img': {
       width: 22,