diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18701ee9..8659bc43 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -175,7 +175,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Row
   - Container
   - Wrapper
-  - Extracted :root from themes.scss to globals.scss
+  - Decorations/Bracket
+  - Decorations/Stick
+
+- Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling
 - Updated the prop name to propStyles in Container component to fix the name conflict that introduced a styling bug
diff --git a/components/decorations/Bracket/Bracket.module.scss b/components/decorations/Bracket/Bracket.module.scss
new file mode 100644
index 00000000..ffd7792d
--- /dev/null
+++ b/components/decorations/Bracket/Bracket.module.scss
@@ -0,0 +1,42 @@
+@use '@/styles/mixins' as *;
+
+.homeBracket {
+  left: 0;
+  position: absolute;
+  transform: translate(10rem, -5rem);
+
+  @include desktop-breakpoint-plus {
+    transform: translate(50%, -5rem);
+    width: 30%;
+  }
+
+  @include desktop-breakpoint-minus {
+    display: none;
+  }
+}
+
+.yellowBracket {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+
+  @include tablet-max {
+    display: none;
+  }
+
+  @include tablet {
+    position: absolute;
+    top: 28%;
+    right: 120%;
+    width: 8rem;
+  }
+
+  @include desktop {
+    top: 25%;
+    right: 120%;
+  }
+
+  @include desktop-breakpoint-plus {
+    top: 45%;
+    right: 140%;
+  }
+}
diff --git a/components/decorations/Bracket.js b/components/decorations/Bracket/index.js
similarity index 100%
rename from components/decorations/Bracket.js
rename to components/decorations/Bracket/index.js
diff --git a/components/decorations/Stick/Stick.module.scss b/components/decorations/Stick/Stick.module.scss
new file mode 100644
index 00000000..3239f3ab
--- /dev/null
+++ b/components/decorations/Stick/Stick.module.scss
@@ -0,0 +1,15 @@
+@use '@/styles/mixins' as *;
+
+.homeStick {
+  right: 0;
+  position: absolute;
+  transform: translate(-10rem, -5rem);
+
+  @include desktop-breakpoint-plus-max {
+    transform: translate(-50%, -5rem);
+    width: 30%;
+  }
+  @include desktop-breakpoint-minus {
+    display: none;
+  }
+}
diff --git a/components/decorations/Stick.js b/components/decorations/Stick/index.js
similarity index 100%
rename from components/decorations/Stick.js
rename to components/decorations/Stick/index.js
diff --git a/pages/contact.js b/pages/contact.js
index 38a584d1..c529dbdc 100644
--- a/pages/contact.js
+++ b/pages/contact.js
@@ -2,7 +2,8 @@ import { useState } from 'react';
 import ContactUsFormSubscribe from '@/components/ContactUs';
 import ContactUsCards from '@/components/ContactUs/ContactUsCards';
 import S from '@/styles/pages/contactStyles';
-
+import Bracket from '@/components/decorations/Bracket';
+import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
 export default function ContactUs() {
   const [message, setMessage] = useState([]);
 
@@ -10,7 +11,7 @@ export default function ContactUs() {
     <>
       <S.ContactUsContainer>
         <S.FormAndDecorations>
-          <S.YellowBracket />
+          <Bracket className={bracketStyles.yellowBracket} />
           <ContactUsFormSubscribe setMsg={setMessage} />
           <S.YellowColon src='/images/svg/yellow-colon.svg' />
           <S.ResponseMessage>
diff --git a/pages/index.js b/pages/index.js
index 62b88b97..6a771041 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,6 +1,9 @@
 import TwoColumn from '@/components/containers/TwoColumn';
 import { CardsColumns } from '@/components/containers/CardColumns';
-import S from '@/styles/pages/homeStyles';
+import Bracket from '@/components/decorations/Bracket';
+import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
+import Stick from '@/components/decorations/Stick';
+import stickStyles from '@/components/decorations/Stick/Stick.module.scss';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { useTheme } from 'styled-components';
 
@@ -21,7 +24,7 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <S.Bracket />
+        <Bracket className={bracketStyles.homeBracket} />
         <TwoColumn
           title='Get involved.'
           content='Web Dev Path runs on volunteers. Here are the ways you can get involved with us:'
@@ -66,8 +69,7 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <S.Stick />
-
+        <Stick className={stickStyles.homeStick} />
         <TwoColumn
           title='Nonprofit?'
           content='Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how.'
diff --git a/styles/_mixins.scss b/styles/_mixins.scss
index 80e8bac8..32e474f0 100644
--- a/styles/_mixins.scss
+++ b/styles/_mixins.scss
@@ -14,6 +14,12 @@
   }
 }
 
+@mixin tablet-max {
+  @media (max-width: $tablet-breakpoint) {
+    @content;
+  }
+}
+
 @mixin desktop {
   @media (min-width: $desktop-breakpoint) {
     @content;
@@ -26,6 +32,12 @@
   }
 }
 
+@mixin desktop-breakpoint-plus-max {
+  @media (max-width: $desktop-breakpoint-plus) {
+    @content;
+  }
+}
+
 @mixin medium-desktop {
   @media (min-width: $medium-desktop-breakpoint) {
     @content;
diff --git a/styles/pages/contactStyles.js b/styles/pages/contactStyles.js
index c5923b33..0aa85f64 100644
--- a/styles/pages/contactStyles.js
+++ b/styles/pages/contactStyles.js
@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import Bracket from '@/components/decorations/Bracket';
 
 const ContactUsContainer = styled.div`
   background-color: ${({ theme }) => theme.colors.lightBg};
@@ -43,40 +42,6 @@ const FormAndDecorations = styled.div`
   `}
 `;
 
-const YellowBracket = styled(Bracket)`
-  -webkit-transform: scaleX(-1);
-  transform: scaleX(-1);
-
-  ${props => css`
-    @media (max-width: ${props.theme.breakpoints.tablet}) {
-      display: none;
-    }
-  `}
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.tablet}) {
-      position: absolute;
-      top: 28%;
-      right: 120%;
-      width: 8rem;
-    }
-  `}
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.desktop}) {
-      top: 25%;
-      right: 120%;
-    }
-  `}
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.desktopPlus}) {
-      top: 45%;
-      right: 140%;
-    }
-  `}
-`;
-
 const YellowColon = styled.img`
   ${props => css`
     @media (max-width: ${props.theme.breakpoints.desktopMinus}) {
@@ -115,7 +80,6 @@ const ResponseMessage = styled.div`
 export default {
   ContactUsContainer,
   FormAndDecorations,
-  YellowBracket,
   YellowColon,
   ResponseMessage,
 };
diff --git a/styles/pages/homeStyles.js b/styles/pages/homeStyles.js
deleted file mode 100644
index 2caf03ec..00000000
--- a/styles/pages/homeStyles.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import styled, { css } from 'styled-components';
-import Bracket from '@/components/decorations/Bracket';
-import Stick from '@/components/decorations/Stick';
-
-const HomeBracket = styled(Bracket)`
-  left: 0;
-  position: absolute;
-  transform: translate(10rem, -5rem);
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.desktopPlus}) {
-      transform: translate(50%, -5rem);
-      width: 30%;
-    }
-  `}
-  ${props => css`
-    @media (max-width: ${props.theme.breakpoints.desktopMinus}) {
-      display: none;
-    }
-  `}
-`;
-const HomeStick = styled(Stick)`
-  right: 0;
-  position: absolute;
-  transform: translate(-10rem, -5rem);
-
-  ${props => css`
-    @media (max-width: ${props.theme.breakpoints.desktopPlus}) {
-      transform: translate(-50%, -5rem);
-      width: 30%;
-    }
-  `}
-
-  ${props => css`
-    @media (max-width: ${props.theme.breakpoints.desktopMinus}) {
-      display: none;
-    }
-  `}
-`;
-
-export default { Bracket: HomeBracket, Stick: HomeStick };