diff --git a/apps/roboshield/src/components/DesktopNavBar/DesktopNavBar.tsx b/apps/roboshield/src/components/DesktopNavBar/DesktopNavBar.tsx
index 7d2235ebb..ae437d5bf 100644
--- a/apps/roboshield/src/components/DesktopNavBar/DesktopNavBar.tsx
+++ b/apps/roboshield/src/components/DesktopNavBar/DesktopNavBar.tsx
@@ -3,11 +3,7 @@ import React, { ForwardedRef } from "react";
 
 import NavBarNavList from "@/roboshield/components/NavBarNavList";
 import NextImageButton from "@/roboshield/components/NextImageButton";
-
-interface SocialLinks {
-  platform: string;
-  url: string;
-}
+import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon";
 
 interface Menu {
   label: string;
@@ -16,7 +12,7 @@ interface Menu {
 interface Props extends Grid2Props {
   logo: any;
   menus: Menu[];
-  socialLinks: SocialLinks[];
+  socialLinks: SocialMediaLink[];
 }
 const DesktopNavBar = React.forwardRef(function DesktopNavBar(
   props: Props,
diff --git a/apps/roboshield/src/components/Footer/Footer.tsx b/apps/roboshield/src/components/Footer/Footer.tsx
index b5ee76b4f..07bed8058 100644
--- a/apps/roboshield/src/components/Footer/Footer.tsx
+++ b/apps/roboshield/src/components/Footer/Footer.tsx
@@ -9,10 +9,11 @@ import RichText from "@/roboshield/components/RichText";
 import type { Children } from "@/roboshield/components/RichText";
 import FooterDescription from "./FooterDescription";
 import { Partner } from "@/roboshield/lib/data/payload.types";
+import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon";
 
 export interface FooterProps {
   connect: {
-    links: { url: string; platform: string }[];
+    links: SocialMediaLink[];
     title: string;
   };
   description: Children;
diff --git a/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx b/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx
index f48c6291e..4d8f1b471 100644
--- a/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx
+++ b/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx
@@ -15,11 +15,7 @@ import menuIcon from "@/roboshield/assets/icons/menu-icon.svg";
 import CloseIcon from "@/roboshield/assets/icons/Type=x, Size=24, Color=CurrentColor.svg";
 import NavBarNavList from "@/roboshield/components/NavBarNavList";
 import NextImageButton from "@/roboshield/components/NextImageButton";
-
-interface SocialLinks {
-  platform: string;
-  url: string;
-}
+import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon";
 
 interface Menu {
   label: string;
@@ -28,7 +24,7 @@ interface Menu {
 interface Props extends Grid2Props {
   logo: any;
   menus: Menu[];
-  socialLinks: SocialLinks[];
+  socialLinks: SocialMediaLink[];
 }
 
 const DialogContainer = styled(Dialog)(({ theme: { palette, spacing } }) => ({
diff --git a/apps/roboshield/src/components/NavBar/NavBar.tsx b/apps/roboshield/src/components/NavBar/NavBar.tsx
index 6c7755ea0..1844c8f9d 100644
--- a/apps/roboshield/src/components/NavBar/NavBar.tsx
+++ b/apps/roboshield/src/components/NavBar/NavBar.tsx
@@ -3,11 +3,7 @@ import React from "react";
 
 import DesktopNavBar from "@/roboshield/components/DesktopNavBar";
 import MobileNavBar from "@/roboshield/components/MobileNavBar";
-
-interface SocialLinks {
-  platform: string;
-  url: string;
-}
+import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon";
 
 interface Menu {
   label: string;
@@ -16,7 +12,7 @@ interface Menu {
 interface Props {
   logo: any;
   menus: Menu[];
-  socialLinks: SocialLinks[];
+  socialLinks: SocialMediaLink[];
 }
 function NavBar({ logo, menus, socialLinks }: Props) {
   return (
diff --git a/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx b/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx
index 604459296..07a03818a 100644
--- a/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx
+++ b/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx
@@ -3,22 +3,12 @@ import { Link } from "@commons-ui/next";
 import { LinkProps, SvgIcon } from "@mui/material";
 import React, { ElementType, FC } from "react";
 
-import GitHubIcon from "@/roboshield/assets/icons/Type=github, Size=24, Color=CurrentColor.svg";
 import NavListItem from "@/roboshield/components/NavListItem";
-
-const platformToIconMap: {
-  [key: string]: ElementType<any>;
-} = {
-  Github: GitHubIcon,
-};
+import SocialMediaLinkIcon from "@/roboshield/components/SocialMediaLinkIcon";
+import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon";
 
 interface NavListItemProps extends LinkProps {}
 
-interface SocialLinks {
-  platform: string;
-  url: string;
-}
-
 interface Menu {
   label: string;
   href: string;
@@ -28,7 +18,7 @@ interface Props {
   NavListItemProps?: NavListItemProps;
   direction?: string;
   menus?: Menu[];
-  socialLinks?: SocialLinks[];
+  socialLinks?: SocialMediaLink[];
 }
 
 const NavBarNavList: FC<Props> = React.forwardRef(
@@ -53,7 +43,7 @@ const NavBarNavList: FC<Props> = React.forwardRef(
               {...NavListItemProps}
               href={item.href}
               sx={{
-                typography: { md: "body1Bold" },
+                typography: { md: "body3" },
                 "&:hover, &:active, &:focus, &:focus-within": {
                   textDecoration: "none",
                   color: { xs: "inherit", md: "primary.main" },
@@ -66,29 +56,24 @@ const NavBarNavList: FC<Props> = React.forwardRef(
           </NavListItem>
         ))}
         {socialLinks?.map(({ platform, url }) => {
-          const Icon = platformToIconMap[platform];
-          if (!Icon) {
-            return null;
-          }
           return (
             <NavListItem key={platform}>
-              <Link
-                href={url}
+              <SocialMediaLinkIcon
+                url={url}
+                platform={platform}
                 variant="h3"
+                IconProps={{
+                  fontSize: "inherit",
+                  sx: {
+                    fill: { xs: "none" },
+                    mt: direction === "column" ? 0 : 1,
+                  },
+                }}
                 sx={{
                   color: { xs: "inherit" },
                   typography: { md: "h5" },
                 }}
-              >
-                <SvgIcon
-                  component={Icon}
-                  fontSize="inherit"
-                  sx={{
-                    fill: { xs: "none" },
-                    mt: direction === "column" ? 0 : 1,
-                  }}
-                />
-              </Link>
+              />
             </NavListItem>
           );
         })}
diff --git a/apps/roboshield/src/components/Page/Page.tsx b/apps/roboshield/src/components/Page/Page.tsx
index f66091302..70ebfe716 100644
--- a/apps/roboshield/src/components/Page/Page.tsx
+++ b/apps/roboshield/src/components/Page/Page.tsx
@@ -1,14 +1,9 @@
 import React from "react";
 
-import type { FooterProps } from "@/roboshield/components/Footer";
 import Footer from "@/roboshield/components/Footer";
-
+import type { FooterProps } from "@/roboshield/components/Footer";
 import NavBar from "@/roboshield/components/NavBar";
-
-interface SocialLinks {
-  platform: string;
-  url: string;
-}
+import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon";
 
 interface Menu {
   label: string;
@@ -23,7 +18,7 @@ interface Menu {
 interface Navbar {
   logo: any;
   menus: Menu[];
-  socialLinks: SocialLinks[];
+  socialLinks: SocialMediaLink[];
 }
 interface Footer {
   logo: any;
diff --git a/apps/roboshield/src/components/SocialMediaLinkIcon/LinkIcon.tsx b/apps/roboshield/src/components/SocialMediaLinkIcon/LinkIcon.tsx
new file mode 100644
index 000000000..e28a435a6
--- /dev/null
+++ b/apps/roboshield/src/components/SocialMediaLinkIcon/LinkIcon.tsx
@@ -0,0 +1,22 @@
+import { Link, RichTypography } from "@commons-ui/next";
+import { Grid, SvgIcon } from "@mui/material";
+import type { LinkProps, SvgIconProps } from "@mui/material";
+import React from "react";
+
+interface LinkIconProps extends LinkProps {
+  IconProps: SvgIconProps;
+}
+
+const LinkIcon = React.forwardRef(function LinkIcon(
+  { IconProps, ...props }: LinkIconProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+) {
+  return (
+    <Link {...props} ref={ref}>
+      <SvgIcon {...IconProps} />
+    </Link>
+  );
+});
+
+export type { LinkIconProps };
+export default LinkIcon;
diff --git a/apps/roboshield/src/components/SocialMediaLinkIcon/SocialMediaLinkIcon.tsx b/apps/roboshield/src/components/SocialMediaLinkIcon/SocialMediaLinkIcon.tsx
new file mode 100644
index 000000000..a0c0cfb48
--- /dev/null
+++ b/apps/roboshield/src/components/SocialMediaLinkIcon/SocialMediaLinkIcon.tsx
@@ -0,0 +1,64 @@
+import { Link, RichTypography } from "@commons-ui/next";
+import { Grid, SvgIcon } from "@mui/material";
+import React from "react";
+
+import FacebookIcon from "@/roboshield/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg";
+import GitHubIcon from "@/roboshield/assets/icons/Type=github, Size=24, Color=CurrentColor.svg";
+import InstagramIcon from "@/roboshield/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg";
+import LinkedInIcon from "@/roboshield/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg";
+import SlackIcon from "@/roboshield/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg";
+import TwitterIcon from "@/roboshield/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg";
+
+import LinkIcon from "./LinkIcon";
+import type { LinkIconProps } from "./LinkIcon";
+
+const platformToIconMap = new Map<string, any>();
+platformToIconMap.set("Facebook", FacebookIcon);
+platformToIconMap.set("Twitter", TwitterIcon);
+platformToIconMap.set("Instagram", InstagramIcon);
+platformToIconMap.set("Linkedin", LinkedInIcon);
+platformToIconMap.set("Github", GitHubIcon);
+platformToIconMap.set("Slack", SlackIcon);
+
+type SocialMediaPlatform =
+  | "Facebook"
+  | "Github"
+  | "Instagram"
+  | "LinkedIn"
+  | "Slack"
+  | "Twitter";
+
+interface SocialMediaLink {
+  platform: SocialMediaPlatform;
+  // TODO(koech): Confirm why we chose url instead of href in the CMS
+  url: string;
+}
+
+interface SocialMediaLinkIconProps extends Omit<LinkIconProps, "href"> {
+  platform: SocialMediaPlatform;
+  url: string;
+}
+
+const SocialMediaLinkIcon = React.forwardRef(function SocialMediaLinkIcon(
+  { IconProps, url, platform, ...props }: SocialMediaLinkIconProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+) {
+  const Icon = platformToIconMap.get(platform);
+
+  if (!Icon) {
+    return null;
+  }
+  return (
+    <LinkIcon
+      {...props}
+      IconProps={{
+        component: Icon,
+        ...IconProps,
+      }}
+      href={url}
+    />
+  );
+});
+
+export type { SocialMediaLink, SocialMediaLinkIconProps, SocialMediaPlatform };
+export default SocialMediaLinkIcon;
diff --git a/apps/roboshield/src/components/SocialMediaLinkIcon/index.ts b/apps/roboshield/src/components/SocialMediaLinkIcon/index.ts
new file mode 100644
index 000000000..127dd1f95
--- /dev/null
+++ b/apps/roboshield/src/components/SocialMediaLinkIcon/index.ts
@@ -0,0 +1,9 @@
+import type {
+  SocialMediaLink,
+  SocialMediaLinkIconProps,
+  SocialMediaPlatform,
+} from "./SocialMediaLinkIcon";
+import SocialMediaLinkIcon from "./SocialMediaLinkIcon";
+
+export type { SocialMediaLink, SocialMediaLinkIconProps, SocialMediaPlatform };
+export default SocialMediaLinkIcon;
diff --git a/apps/roboshield/src/components/StayInTouch/StayInTouch.tsx b/apps/roboshield/src/components/StayInTouch/StayInTouch.tsx
index 7631ddb3f..b4bf60f44 100644
--- a/apps/roboshield/src/components/StayInTouch/StayInTouch.tsx
+++ b/apps/roboshield/src/components/StayInTouch/StayInTouch.tsx
@@ -2,23 +2,11 @@ import { Link, RichTypography } from "@commons-ui/next";
 import { Grid, SvgIcon } from "@mui/material";
 import React from "react";
 
-import FacebookIcon from "@/roboshield/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg";
-import GitHubIcon from "@/roboshield/assets/icons/Type=github, Size=24, Color=CurrentColor.svg";
-import InstagramIcon from "@/roboshield/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg";
-import LinkedInIcon from "@/roboshield/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg";
-import SlackIcon from "@/roboshield/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg";
-import TwitterIcon from "@/roboshield/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg";
-
-const platformToIconMap = new Map<string, any>();
-platformToIconMap.set("Facebook", FacebookIcon);
-platformToIconMap.set("Twitter", TwitterIcon);
-platformToIconMap.set("Instagram", InstagramIcon);
-platformToIconMap.set("Linkedin", LinkedInIcon);
-platformToIconMap.set("Github", GitHubIcon);
-platformToIconMap.set("Slack", SlackIcon);
+import SocialMediaLinkIcon from "@/roboshield/components/SocialMediaLinkIcon";
+import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon";
 
 interface StayInTouchProps {
-  links: { url: string; platform: string }[];
+  links: SocialMediaLink[];
   sx: any;
   title: string;
 }
@@ -60,11 +48,6 @@ const StayInTouch = React.forwardRef(function StayInTouch(
         justifyContent={{ xs: "center", md: "flex-start" }}
       >
         {links.map(({ url, platform }) => {
-          const Icon = platformToIconMap.get(platform);
-
-          if (!(Icon || url)) {
-            return null;
-          }
           return (
             <Grid
               item
@@ -76,20 +59,20 @@ const StayInTouch = React.forwardRef(function StayInTouch(
                 },
               }}
             >
-              <Link
+              <SocialMediaLinkIcon
+                color="inherit"
+                url={url}
+                platform={platform}
+                IconProps={{
+                  fontSize: "inherit",
+                  sx: {
+                    fill: { xs: "none" },
+                  },
+                }}
                 sx={{
                   display: "block",
                 }}
-                color="inherit"
-                href={url}
-              >
-                <SvgIcon
-                  component={Icon}
-                  sx={{
-                    fill: { xs: "none" },
-                  }}
-                />
-              </Link>
+              />
             </Grid>
           );
         })}