6 files changed, 40 insertions, 29 deletions
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.js b/opendc-web/opendc-web-ui/src/pages/Home.js
index fb383426..ee930fbe 100644
--- a/opendc-web/opendc-web-ui/src/pages/Home.js
+++ b/opendc-web/opendc-web-ui/src/pages/Home.js
@@ -8,7 +8,14 @@ import StakeholderSection from '../components/home/StakeholderSection'
 import TeamSection from '../components/home/TeamSection'
 import TechnologiesSection from '../components/home/TechnologiesSection'
 import HomeNavbar from '../components/navigation/HomeNavbar'
-import './Home.sass'
+import {
+    introSection,
+    stakeholderSection,
+    modelingSection,
+    simulationSection,
+    technologiesSection,
+    teamSection,
+} from './Home.module.scss'
 import { useDocumentTitle } from '../util/hooks'
 
 function Home() {
@@ -18,12 +25,12 @@ function Home() {
             <HomeNavbar />
             <div className="body-wrapper page-container">
                 <JumbotronHeader />
-                <IntroSection />
-                <StakeholderSection />
-                <ModelingSection />
-                <SimulationSection />
-                <TechnologiesSection />
-                <TeamSection />
+                <IntroSection className={introSection} />
+                <StakeholderSection className={stakeholderSection} />
+                <ModelingSection className={modelingSection} />
+                <SimulationSection className={simulationSection} />
+                <TechnologiesSection className={technologiesSection} />
+                <TeamSection className={teamSection} />
                 <ContactSection />
             </div>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.module.scss b/opendc-web/opendc-web-ui/src/pages/Home.module.scss
new file mode 100644
index 00000000..aed1d88f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/Home.module.scss
@@ -0,0 +1,16 @@
+.bodyWrapper {
+    position: relative;
+    overflow-y: hidden;
+}
+
+.introSection,
+.modelingSection,
+.technologiesSection {
+    background-color: #fff;
+}
+
+.stakeholderSection,
+.simulationSection,
+.teamSection {
+    background-color: #f2f2f2;
+}
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.sass b/opendc-web/opendc-web-ui/src/pages/Home.sass
deleted file mode 100644
index 79cb9698..00000000
--- a/opendc-web/opendc-web-ui/src/pages/Home.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-.body-wrapper
-    position: relative
-    overflow-y: hidden
-
-.intro-section, .modeling-section, .technologies-section
-    background-color: #fff
-
-.stakeholder-section, .simulation-section, .team-section
-    background-color: #f2f2f2
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.js b/opendc-web/opendc-web-ui/src/pages/NotFound.js
index b933ffa5..409ffa0e 100644
--- a/opendc-web/opendc-web-ui/src/pages/NotFound.js
+++ b/opendc-web/opendc-web-ui/src/pages/NotFound.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import TerminalWindow from '../components/not-found/TerminalWindow'
-import './NotFound.sass'
+import style from './NotFound.module.scss'
 import { useDocumentTitle } from '../util/hooks'
 
 const NotFound = () => {
     useDocumentTitle('Page Not Found - OpenDC')
     return (
-        <div className="not-found-backdrop">
+        <div className={style['not-found-backdrop']}>
             <TerminalWindow />
         </div>
     )
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss b/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
new file mode 100644
index 00000000..e91c2780
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
@@ -0,0 +1,8 @@
+.not-found-backdrop {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+
+    background-image: linear-gradient(135deg, #00678a, #008fbf, #00a6d6);
+}
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.sass b/opendc-web/opendc-web-ui/src/pages/NotFound.sass
deleted file mode 100644
index 59231f7a..00000000
--- a/opendc-web/opendc-web-ui/src/pages/NotFound.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-.not-found-backdrop
-    position: absolute
-    left: 0
-    top: 0
-
-    margin: 0
-    padding: 0
-    width: 100%
-    height: 100%
-
-    background-image: linear-gradient(135deg, #00678a, #008fbf, #00A6D6)