diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07dc6bd1..980b9ee0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -152,3 +152,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Updated outdated dependencies
 
 ### Fixed
+
+### Changed
+- Started migrating styles from Styled Components to CSS Modules (ContactUsCard)
\ No newline at end of file
diff --git a/components/ContactUs/ContactUsCards/ContactUsCards.module.scss b/components/ContactUs/ContactUsCards/ContactUsCards.module.scss
new file mode 100644
index 00000000..94c8aebf
--- /dev/null
+++ b/components/ContactUs/ContactUsCards/ContactUsCards.module.scss
@@ -0,0 +1,3 @@
+.contactCards {
+  background-color: var(--bg-contact-card);
+}
diff --git a/components/ContactUsCards.js b/components/ContactUs/ContactUsCards/index.js
similarity index 72%
rename from components/ContactUsCards.js
rename to components/ContactUs/ContactUsCards/index.js
index 5f07f64b..d198833b 100644
--- a/components/ContactUsCards.js
+++ b/components/ContactUs/ContactUsCards/index.js
@@ -1,9 +1,8 @@
-import { ContactCardsColumns } from './containers/CardColumns/ContactCardsColumns';
-import RevealContentContainer from './containers/RevealContentContainer';
-import styled from 'styled-components';
+import { ContactCardsColumns } from '../../containers/CardColumns/ContactCardsColumns';
+import RevealContentContainer from '../../containers/RevealContentContainer';
+import styles from './ContactUsCards.module.scss';
 
 const cards = [
-
   {
     title: 'FAQ',
     image: '/images/svg/faq-icon.svg',
@@ -31,16 +30,12 @@ const cards = [
   },
 ];
 
-const ContactCardsContainer = styled.div`
-  background-color: ${({ theme }) => theme.colors.white};
-`;
-
 export default function ContactUsCards() {
   return (
-    <ContactCardsContainer>
+    <article className={styles.contactCards}>
       <RevealContentContainer>
         <ContactCardsColumns cards={cards} />
       </RevealContentContainer>
-    </ContactCardsContainer>
+    </article>
   );
 }
diff --git a/pages/_app.js b/pages/_app.js
index 78a8765c..ef275342 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -2,9 +2,9 @@ import Layout from '@/components/layout/Layout';
 import { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { lightTheme, darkTheme, GlobalStyles } from '@/styles/themeConfig';
+import '@/styles/index.scss';
 
 function MyApp({ Component, pageProps }) {
-  
   // Only uncomment when the darkTheme is set
   // const [theme, setTheme] = useState('light');
   // const toggleTheme = () => {
diff --git a/pages/contact.js b/pages/contact.js
index cb98d482..38a584d1 100644
--- a/pages/contact.js
+++ b/pages/contact.js
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import ContactUsFormSubscribe from '@/components/ContactUs';
-import ContactUsCards from '@/components/ContactUsCards';
+import ContactUsCards from '@/components/ContactUs/ContactUsCards';
 import S from '@/styles/pages/contactStyles';
 
 export default function ContactUs() {
diff --git a/styles/_mixins.scss b/styles/_mixins.scss
new file mode 100644
index 00000000..80e8bac8
--- /dev/null
+++ b/styles/_mixins.scss
@@ -0,0 +1,57 @@
+@use './variables' as *;
+
+@mixin transition($args...) {
+  -webkit-transition: $args;
+  -moz-transition: $args;
+  -ms-transition: $args;
+  -o-transition: $args;
+  transition: $args;
+}
+
+@mixin tablet {
+  @media (min-width: $tablet-breakpoint) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: $desktop-breakpoint) {
+    @content;
+  }
+}
+
+@mixin desktop-breakpoint-plus {
+  @media (min-width: $desktop-breakpoint-plus) {
+    @content;
+  }
+}
+
+@mixin medium-desktop {
+  @media (min-width: $medium-desktop-breakpoint) {
+    @content;
+  }
+}
+
+@mixin large-desktop {
+  @media (min-width: $large-desktop-breakpoint) {
+    @content;
+  }
+}
+
+@mixin desktop-breakpoint-minus {
+  @media (max-width: $desktop-breakpoint-minus) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: $lg-mobile-breakpoint) {
+    @content;
+  }
+}
+
+@mixin small-mobile {
+  @media (max-width: $sm-mobile-breakpoint) {
+    @content;
+  }
+}
diff --git a/styles/_variables.scss b/styles/_variables.scss
new file mode 100644
index 00000000..ac3d97d8
--- /dev/null
+++ b/styles/_variables.scss
@@ -0,0 +1,15 @@
+// Media Query Breakpoints
+$sm-mobile-breakpoint: 350px;
+$mobile-breakpoint: 578px;
+$lg-mobile-breakpoint: 767px;
+$tablet-breakpoint: 768px;
+$desktop-breakpoint-minus: 1023px;
+$desktop-breakpoint: 1024px;
+$desktop-breakpoint-plus: 1025px;
+$medium-desktop-breakpoint: 1250px;
+$large-desktop-breakpoint: 1440px;
+$extra-large-breakpoint: 2560px;
+
+//Fonts
+$copy-font: 'Assistant';
+$heading-font: 'Open Sans';
diff --git a/styles/index.scss b/styles/index.scss
new file mode 100644
index 00000000..07bf9359
--- /dev/null
+++ b/styles/index.scss
@@ -0,0 +1,3 @@
+@use './themes';
+@use './mixins';
+@use './variables';
diff --git a/styles/themes.scss b/styles/themes.scss
new file mode 100644
index 00000000..9263240f
--- /dev/null
+++ b/styles/themes.scss
@@ -0,0 +1,16 @@
+:root {
+  --bg-contact-card: #ffffff;
+  --bg-color: #eaeaea;
+}
+
+// placeholder colors
+[data-theme='dark'] {
+  --bg-contact-card: #232431;
+  --bg-color: #333;
+}
+
+// Theming notes:
+/*
+Set document data-theme to dark to activate dark theme, for example
+  document.documentElement.setAttribute('data-theme', 'dark');
+ */