diff --git a/CHANGELOG.md b/CHANGELOG.md
index 77b466e7..e269ff64 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -167,5 +167,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - SearchBar
   - BlogPostsContainer
   - RevealContentContainer
+  - Member
+  
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling 
\ No newline at end of file
diff --git a/components/containers/Member/Member.module.scss b/components/containers/Member/Member.module.scss
new file mode 100644
index 00000000..7717cad0
--- /dev/null
+++ b/components/containers/Member/Member.module.scss
@@ -0,0 +1,91 @@
+@use '@/styles/mixins' as *;
+
+.card {
+  margin: 1rem 1rem 0 0.5rem;
+  padding: 1rem;
+  border-radius: 1.5rem;
+  min-height: 35rem;
+  background-color: var(--color-transparent);
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  width: 100%;
+
+  @include tablet {
+    height: 30rem;
+    width: 40%;
+  }
+
+  @include medium-desktop {
+    min-width: 20%;
+    max-width: 20%;
+    margin: 1.5rem;
+  }
+}
+
+.name {
+  font-style: italic;
+  font-family: var(--font-heading);
+  font-size: 1.5rem;
+  color: var(--color-primary-content);
+  margin-bottom: 0px;
+  line-height: unset;
+}
+
+%headingStyle {
+  font-family: var(--font-heading);
+  font-size: 1rem;
+  color: var(--color-primary-content);
+  text-align: left;
+  line-height: normal;
+  margin: 0px;
+}
+
+.title {
+  @extend %headingStyle;
+}
+
+.position {
+  @extend %headingStyle;
+}
+
+.content {
+  align-items: center;
+  margin: auto;
+}
+
+.paragraph {
+  font-size: 1rem;
+  text-align: left;
+  line-height: normal;
+}
+
+.linkWrapper {
+  font-size: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  margin-bottom: 1rem;
+
+  a {
+    padding-left: 1rem;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    &:hover {
+      opacity: 0.6;
+      text-decoration: none;
+    }
+  }
+}
+
+.imageWrapper {
+  min-width: 10rem;
+  min-height: 10rem;
+  position: relative;
+  margin: 0.5rem auto;
+
+  img {
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
diff --git a/components/containers/Member/index.js b/components/containers/Member/index.js
index 5bc308ea..b14e9576 100644
--- a/components/containers/Member/index.js
+++ b/components/containers/Member/index.js
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import S from './styles';
+import styles from './Member.module.scss';
 
 export default function Member({
   image,
@@ -11,19 +11,19 @@ export default function Member({
   portfolio,
 }) {
   return (
-    <S.Card>
+    <div className={styles.card}>
       {image && (
-        <S.ImageWrapper>
+        <div className={styles.imageWrapper}>
           <Image src={image} alt={name} fill />
-        </S.ImageWrapper>
+        </div>
       )}
 
-      <S.Name>{name}</S.Name>
-      <S.Title>{title}</S.Title>
-      <S.Position>{position}</S.Position>
-      <S.Content>
+      <h2 className={styles.name}>{name}</h2>
+      <h3 className={styles.title}>{title}</h3>
+      <h3 className={styles.position}>{position}</h3>
+      <div className={styles.content}>
         {linkedIn && (
-          <S.LinkWrapper>
+          <div className={styles.linkWrapper}>
             <Image
               src='/images/svg/linkedin-portfolio.svg'
               alt='LinkedIn'
@@ -37,10 +37,10 @@ export default function Member({
             >
               {linkedIn}
             </a>
-          </S.LinkWrapper>
+          </div>
         )}
         {portfolio && (
-          <S.LinkWrapper>
+          <div className={styles.linkWrapper}>
             <Image
               src='/images/svg/globe.svg'
               alt='Web Site'
@@ -54,11 +54,11 @@ export default function Member({
             >
               {portfolio}
             </a>
-          </S.LinkWrapper>
+          </div>
         )}
 
-        <S.Paragraph>{about}</S.Paragraph>
-      </S.Content>
-    </S.Card>
+        <p className={styles.paragraph}>{about}</p>
+      </div>
+    </div>
   );
 }
diff --git a/components/containers/Member/styles.js b/components/containers/Member/styles.js
deleted file mode 100644
index 10f5260e..00000000
--- a/components/containers/Member/styles.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import styled, { css } from 'styled-components';
-
-const Card = styled.div`
-  margin: 1rem 1rem 0 0.5rem;
-  padding: 1rem;
-  border-radius: 1.5rem;
-  min-height: 35rem;
-  background-color: ${({ theme }) => theme.colors.transparent};
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  width: 100%;
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.tablet}) {
-      height: 30rem;
-      width: 40%;
-    }
-  `}
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.mediumDesktop}) {
-      min-width: 20%;
-      max-width: 20%;
-      margin: 1.5rem;
-    }
-  `}
-`;
-
-const Name = styled.h2`
-  font-style: italic;
-  font-family: ${({ theme }) => theme.fonts.heading};
-  font-size: 1.5rem !important;
-  color: ${({ theme }) => theme.colors.primaryContent};
-  margin-bottom: 0px;
-  line-height: unset;
-`;
-
-const H3 = styled.h3`
-  font-family: ${({ theme }) => theme.fonts.heading};
-  font-size: 1rem !important;
-  color:${({ theme }) => theme.colors.primaryContent};
-  text-align: left;
-  line-height: normal;
-  margin: 0px !important;
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.tablet}) {
-      font-size: 2rem;
-    }
-  `}
-`;
-const Title = styled(H3)``;
-const Position = styled(H3)``;
-
-const Content = styled.div`
-  align-items: center;
-  margin: auto;
-`;
-
-const Paragraph = styled.p`
-  font-size: 1rem !important;
-  text-align: left;
-  line-height: normal;
-`;
-
-const LinkWrapper = styled.div`
-  font-size: 1rem !important;
-  display: flex;
-  flex-direction: row;
-  justify-content: left;
-  margin-bottom: 1rem;
-
-  a {
-    padding-left: 1rem;
-    text-decoration: underline;
-    text-underline-offset: 2px;
-
-    &:hover {
-      opacity: 0.6;
-      text-decoration: none;
-    }
-  }
-`;
-
-const ImageWrapper = styled.div`
-  min-width: 10rem;
-  min-height: 10rem;
-  position: relative;
-  margin: 0.5rem auto;
-
-  img {
-    border-radius: 50%;
-    object-fit: cover;
-  }
-`;
-
-export default {
-  Card,
-  Name,
-  Title,
-  Position,
-  Content,
-  Paragraph,
-  LinkWrapper,
-  ImageWrapper,
-};
diff --git a/styles/themes.scss b/styles/themes.scss
index ac7641b2..1ee02df5 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -11,6 +11,7 @@
   --color-box-shadow: rgba(0, 0, 0, 0.08);
   --dark-bg: #023047;
   --error: #be1313;
+  --font-heading: 'Open Sans';
 }
 
 // placeholder colors