diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx
index c8ba7c1a..bdfe3c48 100644
--- a/src/components/PageWrappers/PageWrapperShadow.tsx
+++ b/src/components/PageWrappers/PageWrapperShadow.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 import { useTheme } from 'tamagui'
 
 import NimbusLogoMark from '../Logos/NimbusLogoMark'
-import './layout.css'
+import styles from './index.module.css'
 
 type PageWrapperShadowProps = {
   breadcrumbBar?: ReactNode
@@ -22,19 +22,19 @@ const PageWrapperShadow = ({
   const theme = useTheme()
 
   return (
-    <div className="layout" style={{ backgroundColor: theme.background.val }}>
-      <section className="layout-left">
+    <div className={styles['layout']} style={{ backgroundColor: theme.background.val }}>
+      <section className={styles['layout-left']}>
         {breadcrumbBar}
-        <div className="container">
-          <div className="container-inner">{children}</div>
+        <div className={styles['container']}>
+          <div className={styles['container-inner']}>{children}</div>
         </div>
       </section>
-      <section className="layout-right">
-        <div className="image-container">
+      <section className={styles['layout-right']}>
+        <div className={styles['image-container']}>
           <img
             src={rightImageSrc}
             alt="background"
-            className="background-img"
+            className={styles['background-img']}
             style={{ height: imgHeight }}
           />
           {rightImageLogo ? <NimbusLogoMark /> : null}
diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/index.module.css
similarity index 100%
rename from src/components/PageWrappers/layout.css
rename to src/components/PageWrappers/index.module.css