diff --git a/CHANGELOG.md b/CHANGELOG.md
index 148cc015..149cc5a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -164,4 +164,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - SubmitButton
   - AuthorBio
   - BlogPostsContainer
+  - RevealContentContainer
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
diff --git a/components/containers/RevealContentContainer/RevealContentContainer.module.scss b/components/containers/RevealContentContainer/RevealContentContainer.module.scss
new file mode 100644
index 00000000..c71e5291
--- /dev/null
+++ b/components/containers/RevealContentContainer/RevealContentContainer.module.scss
@@ -0,0 +1,10 @@
+@use '@/styles/mixins' as *;
+
+.sectionHidden {
+  opacity: 0;
+  transform: translateY(8rem);
+}
+
+.revealContainerWrapper {
+  @include transition(transform 1s, opacity 1s);
+}
diff --git a/components/containers/RevealContentContainer/index.js b/components/containers/RevealContentContainer/index.js
index 9ac0b732..4f6a7aa2 100644
--- a/components/containers/RevealContentContainer/index.js
+++ b/components/containers/RevealContentContainer/index.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useIntersect } from '@/hooks/useIntersect';
-import S from './styles';
+import styles from './RevealContentContainer.module.scss';
 
 const RevealContentContainer = ({ children }) => {
   const [ref, entry] = useIntersect({});
@@ -15,9 +15,16 @@ const RevealContentContainer = ({ children }) => {
   }, [entry.isIntersecting]);
 
   return (
-    <S.RevealContainerWrapper ref={ref} $hiddenStyle={hiddenStyle}>
+    <div
+      ref={ref}
+      className={
+        hiddenStyle
+          ? `${styles.revealContainerWrapper} ${styles.sectionHidden}`
+          : styles.revealContainerWrapper
+      }
+    >
       {children}
-    </S.RevealContainerWrapper>
+    </div>
   );
 };
 
diff --git a/components/containers/RevealContentContainer/styles.js b/components/containers/RevealContentContainer/styles.js
deleted file mode 100644
index 6f5dd1b3..00000000
--- a/components/containers/RevealContentContainer/styles.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled, { css } from 'styled-components';
-import { transition } from '@/styles/themeConfig';
-
-
-const SectionHidden = css`
-  opacity: 0;
-  transform: translateY(8rem);
-`;
-
-const RevealContainerWrapper = styled.div`
-  ${transition('transform 1s, opacity 1s')};
-
-  //check props for hidden style
-  ${props => (props.$hiddenStyle ? SectionHidden : '')}
-`;
-
-export default { RevealContainerWrapper };