diff --git a/components/Nav/Social.tsx b/components/Nav/Social.tsx
index 5611be37..998d34e9 100644
--- a/components/Nav/Social.tsx
+++ b/components/Nav/Social.tsx
@@ -41,30 +41,22 @@ const SocialLink = styled(Link).attrs((/* props */) => ({
   }
 `;
 
-const StyledIcon = styled.div<{ $height?: number; $width?: number }>`
+const StyledIcon = styled.div<{ $height?: number; $width?: number; $bgColor?: string }>`
   && {
     width: ${p => rem(Number(p.$width))};
     height: ${p => rem(Number(p.$height))};
+    background-color: ${p => p.$bgColor || 'transparent'};
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 `;
 
-// const Twitter = () => (
-//   <Svg xmlns="http://www.w3.org/2000/svg" width="19" height="15" viewBox="0 0 19 15" xmlnsXlink="http://www.w3.org/1999/xlink">
-//     <title>twitter-logo</title>
-//     <use fill="#FFF" xlinkHref="#b"/>
-//     <defs>
-//       <path id="b" d="M18.2 1.8l-2 .6c.6-.5 1.2-1.2 1.5-2l-2.4.8C14.7.5 13.7 0 12.6 0 10.6 0 9 1.7 9 3.8v1C6 4.4 3 3 1.3.8 1 1 .8 1.8.8 2.4c0 1.3.6 2.5 1.6 3-.6 0-1.2 0-1.7-.3 0 2 1.3 3.7 3 4H2c.5 1.6 2 2.7 3.5 2.7-1.2 1-3 1.6-4.6 1.6H0c1.7 1 3.6 1.7 5.7 1.7 7 0 10.7-6 10.7-11v-.5c.7-.5 1.3-1.2 1.8-2z"/>
-//     </defs>
-//   </Svg>
-// )
-
 const Social = (props: React.ComponentProps<typeof Wrapper>) => (
   <Wrapper {...props}>
-    {/* <SocialLink href="https://twitter.com/someone">
-      <Twitter />
-    </SocialLink> */}
     <SocialLink href="https://github.com/styled-components" title="GitHub: Source code" target="_blank">
-      <StyledIcon as={Github} $height={18} />
+      <StyledIcon as={Github} $height={25} $bgColor="black" />
     </SocialLink>
     <SocialLink
       href="https://medium.com/styled-components"