diff --git a/components/SocialMedia/SocialMedia.js b/components/SocialMedia/SocialMedia.js
index e4325ec8e..7798e3116 100644
--- a/components/SocialMedia/SocialMedia.js
+++ b/components/SocialMedia/SocialMedia.js
@@ -6,7 +6,6 @@ import YouTubeLogo from 'static/images/icons/youtube_logo.svg';
 import LinkedInLogo from 'static/images/icons/linkedin_logo_circle.svg';
 import SocialMediaContainer from './SocialMediaContainer/SocialMediaContainer';
 import SocialMediaItem from './SocialMediaItem/SocialMediaItem';
-import styles from './SocialMedia.module.css';
 
 function SocialMedia() {
   return (
@@ -14,32 +13,32 @@ function SocialMedia() {
       <SocialMediaItem
         href="https://facebook.com/operationcode.org"
         name="Facebook"
-        svg={<FacebookLogo className={styles.logo} />}
+        svg={<FacebookLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://twitter.com/operation_code"
         name="Twitter"
-        svg={<TwitterLogo className={styles.logo} />}
+        svg={<TwitterLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://www.instagram.com/operation_code/"
         name="Instagram"
-        svg={<InstagramLogo className={styles.logo} />}
+        svg={<InstagramLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://www.youtube.com/channel/UCAoJt4a_KEBmgXfoQUrNbSA"
         name="YouTube"
-        svg={<YouTubeLogo className={styles.logo} />}
+        svg={<YouTubeLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://www.linkedin.com/company/operationcode/"
         name="LinkedIn"
-        svg={<LinkedInLogo className={styles.logo} />}
+        svg={<LinkedInLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://github.com/OperationCode/"
         name="GitHub"
-        svg={<GitHubLogo className={styles.logo} />}
+        svg={<GitHubLogo className="fill-white w-6" />}
       />
     </SocialMediaContainer>
   );
diff --git a/components/SocialMedia/SocialMedia.module.css b/components/SocialMedia/SocialMedia.module.css
deleted file mode 100644
index 597b08726..000000000
--- a/components/SocialMedia/SocialMedia.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.logo {
-  fill: var(--white);
-  height: 26px;
-  width: 26px;
-}
diff --git a/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.js b/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.js
index 8475e3d6a..7d576a44e 100644
--- a/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.js
+++ b/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.js
@@ -1,10 +1,9 @@
 import { arrayOf, element } from 'prop-types';
-import styles from './SocialMediaContainer.module.css';
 
 SocialMediaContainer.propTypes = { children: arrayOf(element).isRequired };
 
 function SocialMediaContainer({ children }) {
-  return <div className={styles.SocialMediaContainer}>{children}</div>;
+  return <div className="flex flex-row justify-around items-center">{children}</div>;
 }
 
 export default SocialMediaContainer;
diff --git a/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.module.css b/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.module.css
deleted file mode 100644
index 007509383..000000000
--- a/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.SocialMediaContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-}
diff --git a/components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.js.snap b/components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.js.snap
index 6a16c16d3..9e7eeff50 100644
--- a/components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.js.snap
+++ b/components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`SocialMediaContainer should render with required props 1`] = `
 <div
-  className="SocialMediaContainer"
+  className="flex flex-row justify-around items-center"
 >
   <div>
     Testing 1
diff --git a/components/SocialMedia/SocialMediaItem/SocialMediaItem.js b/components/SocialMedia/SocialMediaItem/SocialMediaItem.js
index 599c395b4..0f2643372 100644
--- a/components/SocialMedia/SocialMediaItem/SocialMediaItem.js
+++ b/components/SocialMedia/SocialMediaItem/SocialMediaItem.js
@@ -1,7 +1,6 @@
 import { node, string } from 'prop-types';
 import OutboundLink from 'components/OutboundLink/OutboundLink';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
-import styles from './SocialMediaItem.module.css';
 
 SocialMediaItem.propTypes = {
   name: string.isRequired,
@@ -11,7 +10,7 @@ SocialMediaItem.propTypes = {
 
 function SocialMediaItem({ name, href, svg }) {
   return (
-    <div className={styles.SocialMediaItem}>
+    <div className="my-0 mx-2 opacity-80 hover:opacity-100">
       <OutboundLink
         analyticsEventLabel={`Social Media Engagement: ${name}`}
         hasIcon={false}
diff --git a/components/SocialMedia/SocialMediaItem/SocialMediaItem.module.css b/components/SocialMedia/SocialMediaItem/SocialMediaItem.module.css
deleted file mode 100644
index b7e8d1c3d..000000000
--- a/components/SocialMedia/SocialMediaItem/SocialMediaItem.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.SocialMediaItem {
-  margin: 0 0.5rem;
-  opacity: 0.8;
-}
-
-.SocialMediaItem:hover {
-  opacity: 1;
-}
diff --git a/components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/SocialMediaItem.test.js.snap b/components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/SocialMediaItem.test.js.snap
index 49fa1b22d..ab8b7d4bb 100644
--- a/components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/SocialMediaItem.test.js.snap
+++ b/components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/SocialMediaItem.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`SocialMediaItem should render with required props 1`] = `
 <div
-  className="SocialMediaItem"
+  className="my-0 mx-2 opacity-80 hover:opacity-100"
 >
   <a
     className="OutboundLink"
diff --git a/components/SocialMedia/__tests__/__snapshots__/SocialMedia.test.js.snap b/components/SocialMedia/__tests__/__snapshots__/SocialMedia.test.js.snap
index b718fefcc..91a705edd 100644
--- a/components/SocialMedia/__tests__/__snapshots__/SocialMedia.test.js.snap
+++ b/components/SocialMedia/__tests__/__snapshots__/SocialMedia.test.js.snap
@@ -7,7 +7,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="Facebook"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -16,7 +16,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="Twitter"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -25,7 +25,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="Instagram"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -34,7 +34,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="YouTube"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -43,7 +43,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="LinkedIn"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -52,7 +52,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="GitHub"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />