From fa4ebdd9d9fd3bc63347891049b4d07ca1269ecb Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <dash@wind.garden>
Date: Fri, 30 Jun 2023 00:16:41 +0200
Subject: [PATCH] frontend: use more css modules; small fixes

---
 backend/trcustoms/utils.py                    |   1 -
 frontend/src/App.css                          |  38 -----
 frontend/src/App.tsx                          |   1 -
 .../common/AuditLogSearch/index.tsx           |  18 ++-
 .../components/common/AuditLogTable/index.css |  37 -----
 .../common/AuditLogTable/index.module.css     |  26 ++++
 .../components/common/AuditLogTable/index.tsx |  26 ++--
 .../Checkbox/{index.css => index.module.css}  |  10 +-
 .../src/components/common/Checkbox/index.tsx  |   8 +-
 .../DataList/{index.css => index.module.css}  |   2 +-
 .../src/components/common/DataList/index.tsx  |  49 +++---
 .../src/components/common/DataTable/index.css |  30 ----
 .../common/DataTable/index.module.css         |  19 +++
 .../src/components/common/DataTable/index.tsx |  49 +++---
 .../common/DefinitionList/index.css           |  41 -----
 .../common/DefinitionList/index.module.css    |  35 +++++
 .../common/DefinitionList/index.tsx           |  13 +-
 .../EntitiesCheckboxes/index.module.css       |   5 +
 .../common/EntitiesCheckboxes/index.tsx       |  25 +--
 .../FilePicker/Preview/index.module.css       |   3 +
 .../common/FilePicker/Preview/index.tsx       |  83 ++++++++++
 .../FilePicker/ReorderTarget/index.module.css |  28 ++++
 .../common/FilePicker/ReorderTarget/index.tsx |  62 ++++++++
 .../components/common/FilePicker/index.css    |  66 --------
 .../common/FilePicker/index.module.css        |  37 +++++
 .../components/common/FilePicker/index.tsx    | 146 +-----------------
 .../{index.css => index.module.css}           |   2 +-
 .../common/FilterCheckboxesHeader/index.tsx   |   4 +-
 .../common/FormGrid/index.module.css          |   3 -
 .../src/components/common/FormGrid/index.tsx  |   7 +-
 .../components/common/GenreSearch/index.tsx   |   2 +-
 .../components/common/GenresTable/index.css   |   8 -
 .../common/GenresTable/index.module.css       |   8 +
 .../components/common/GenresTable/index.tsx   |   6 +-
 .../{index.css => index.module.css}           |   9 +-
 .../components/common/InfoMessage/index.tsx   |   8 +-
 .../LevelList/{index.css => index.module.css} |  26 ++--
 .../src/components/common/LevelList/index.tsx |  17 +-
 .../{index.css => index.module.css}           |   6 +-
 .../components/common/LevelRating/index.tsx   |  10 +-
 .../LevelSearchSidebar/index.module.css       |  16 +-
 .../common/LevelSearchSidebar/index.tsx       |  14 +-
 .../components/common/LevelSidebar/index.tsx  |   2 +-
 .../components/common/Logo/index.module.css   |   4 +
 frontend/src/components/common/Logo/index.tsx |   4 +-
 .../common/MediumThumbnails/index.tsx         |   8 +-
 .../NavBar/{index.css => index.module.css}    |  36 ++---
 .../src/components/common/NavBar/index.tsx    |  55 ++++---
 .../LegaleseItem/index.module.css             |  32 ++++
 .../NestedLegalese/LegaleseItem/index.tsx     |  71 +++++++++
 .../NestedLegalese/LegaleseTOCItem/index.tsx  |  31 ++++
 .../common/NestedLegalese/index.css           |  48 ------
 .../common/NestedLegalese/index.module.css    |  15 ++
 .../common/NestedLegalese/index.tsx           | 105 ++-----------
 .../{index.css => index.module.css}           |   6 +-
 .../components/common/PicturePicker/index.tsx |   8 +-
 .../{index.css => index.module.css}           |   7 +-
 .../components/common/ProgressBar/index.tsx   |   8 +-
 .../components/common/ReviewForm/index.css    |   7 -
 .../components/common/ReviewForm/index.tsx    |   8 +-
 .../common/ReviewSearchSidebar/index.tsx      |   2 +-
 .../{index.css => index.module.css}           |  32 ++--
 .../components/common/ReviewStats/index.tsx   |  20 +--
 .../{index.css => index.module.css}           |  32 ++--
 .../components/common/ReviewsList/index.tsx   |  29 ++--
 .../Section/{index.css => index.module.css}   |   8 +-
 .../src/components/common/Section/index.tsx   |  12 +-
 .../SortLink/{index.css => index.module.css}  |   6 +-
 .../src/components/common/SortLink/index.tsx  |   6 +-
 .../TabSwitch/{index.css => index.module.css} |  24 +--
 .../src/components/common/TabSwitch/index.tsx |  20 +--
 .../src/components/common/TagSearch/index.tsx |   2 +-
 .../common/TagsTable/index.module.css         |   8 +-
 .../src/components/common/TagsTable/index.tsx |   4 +-
 .../{index.css => index.module.css}           |  16 +-
 .../components/common/UserFancyList/index.tsx |  19 ++-
 .../src/components/common/UserForm/index.tsx  |   2 +-
 .../src/components/common/UserList/index.css  |  14 --
 .../common/UserList/index.module.css          |  14 ++
 .../src/components/common/UserList/index.tsx  |   4 +-
 .../common/WalkthroughForm/index.tsx          |   2 +-
 .../{index.css => index.module.css}           |  24 +--
 .../common/WalkthroughStats/index.tsx         |  22 ++-
 .../common/WalkthroughsTable/index.tsx        |   1 -
 .../formfields/GenresFormField/index.css      |  22 ---
 .../GenresFormField/index.module.css          |  18 +++
 .../formfields/GenresFormField/index.tsx      |   8 +-
 .../formfields/TextAreaFormField/index.css    |  66 --------
 .../TextAreaFormField/index.module.css        |  59 +++++++
 .../formfields/TextAreaFormField/index.tsx    |  22 ++-
 .../layouts/SidebarLayout/index.module.css    |   6 +-
 .../{index.css => index.module.css}           |  20 ++-
 .../MarkdownAttachmentStrip/index.tsx         |   8 +-
 .../Markdown/{index.css => index.module.css}  |  30 ++--
 .../components/markdown/Markdown/index.tsx    |  26 ++--
 .../src/components/pages/AboutPage/index.tsx  |   2 +-
 .../components/pages/GenreListPage/index.tsx  |  10 +-
 .../HomePage/FeaturedLevels/index.module.css  |   4 -
 .../pages/HomePage/FeaturedLevels/index.tsx   |   4 +-
 .../pages/HomePage/StatsSidebar/index.tsx     |  10 +-
 .../components/pages/LevelListPage/index.css  |  37 -----
 .../pages/LevelListPage/index.module.css      |  10 ++
 .../components/pages/LevelListPage/index.tsx  |  32 ++--
 .../components/pages/ModerationPage/index.css |  27 ----
 .../components/pages/ModerationPage/index.tsx |   1 -
 .../pages/ReviewAuthorsPage/index.tsx         |   2 +-
 .../ReviewLevelSuggestionsPage/index.tsx      |   2 +-
 .../components/pages/ReviewListPage/index.tsx |   2 +-
 .../components/pages/TagListPage/index.tsx    |  10 +-
 .../pages/TermsAndConditionsPage/index.tsx    |   2 +-
 .../components/pages/TrophiesPage/index.tsx   |   1 +
 .../pages/UserWalkthroughsPage/index.tsx      |   2 +-
 .../pages/WalkthroughEditPage/index.css       |   3 -
 .../WalkthroughEditPage/index.module.css      |   3 +
 .../pages/WalkthroughEditPage/index.tsx       |  41 ++---
 115 files changed, 1095 insertions(+), 1177 deletions(-)
 delete mode 100644 frontend/src/App.css
 delete mode 100644 frontend/src/components/common/AuditLogTable/index.css
 create mode 100644 frontend/src/components/common/AuditLogTable/index.module.css
 rename frontend/src/components/common/Checkbox/{index.css => index.module.css} (86%)
 rename frontend/src/components/common/DataList/{index.css => index.module.css} (56%)
 delete mode 100644 frontend/src/components/common/DataTable/index.css
 create mode 100644 frontend/src/components/common/DataTable/index.module.css
 delete mode 100644 frontend/src/components/common/DefinitionList/index.css
 create mode 100644 frontend/src/components/common/DefinitionList/index.module.css
 create mode 100644 frontend/src/components/common/EntitiesCheckboxes/index.module.css
 create mode 100644 frontend/src/components/common/FilePicker/Preview/index.module.css
 create mode 100644 frontend/src/components/common/FilePicker/Preview/index.tsx
 create mode 100644 frontend/src/components/common/FilePicker/ReorderTarget/index.module.css
 create mode 100644 frontend/src/components/common/FilePicker/ReorderTarget/index.tsx
 delete mode 100644 frontend/src/components/common/FilePicker/index.css
 create mode 100644 frontend/src/components/common/FilePicker/index.module.css
 rename frontend/src/components/common/FilterCheckboxesHeader/{index.css => index.module.css} (73%)
 delete mode 100644 frontend/src/components/common/GenresTable/index.css
 create mode 100644 frontend/src/components/common/GenresTable/index.module.css
 rename frontend/src/components/common/InfoMessage/{index.css => index.module.css} (84%)
 rename frontend/src/components/common/LevelList/{index.css => index.module.css} (65%)
 rename frontend/src/components/common/LevelRating/{index.css => index.module.css} (60%)
 create mode 100644 frontend/src/components/common/Logo/index.module.css
 rename frontend/src/components/common/NavBar/{index.css => index.module.css} (72%)
 create mode 100644 frontend/src/components/common/NestedLegalese/LegaleseItem/index.module.css
 create mode 100644 frontend/src/components/common/NestedLegalese/LegaleseItem/index.tsx
 create mode 100644 frontend/src/components/common/NestedLegalese/LegaleseTOCItem/index.tsx
 delete mode 100644 frontend/src/components/common/NestedLegalese/index.css
 create mode 100644 frontend/src/components/common/NestedLegalese/index.module.css
 rename frontend/src/components/common/PicturePicker/{index.css => index.module.css} (52%)
 rename frontend/src/components/common/ProgressBar/{index.css => index.module.css} (78%)
 delete mode 100644 frontend/src/components/common/ReviewForm/index.css
 rename frontend/src/components/common/ReviewStats/{index.css => index.module.css} (72%)
 rename frontend/src/components/common/ReviewsList/{index.css => index.module.css} (75%)
 rename frontend/src/components/common/Section/{index.css => index.module.css} (67%)
 rename frontend/src/components/common/SortLink/{index.css => index.module.css} (55%)
 rename frontend/src/components/common/TabSwitch/{index.css => index.module.css} (60%)
 rename frontend/src/components/common/UserFancyList/{index.css => index.module.css} (63%)
 delete mode 100644 frontend/src/components/common/UserList/index.css
 create mode 100644 frontend/src/components/common/UserList/index.module.css
 rename frontend/src/components/common/WalkthroughStats/{index.css => index.module.css} (69%)
 delete mode 100644 frontend/src/components/formfields/GenresFormField/index.css
 create mode 100644 frontend/src/components/formfields/GenresFormField/index.module.css
 delete mode 100644 frontend/src/components/formfields/TextAreaFormField/index.css
 create mode 100644 frontend/src/components/formfields/TextAreaFormField/index.module.css
 rename frontend/src/components/markdown-composer/MarkdownAttachmentStrip/{index.css => index.module.css} (50%)
 rename frontend/src/components/markdown/Markdown/{index.css => index.module.css} (53%)
 delete mode 100644 frontend/src/components/pages/LevelListPage/index.css
 create mode 100644 frontend/src/components/pages/LevelListPage/index.module.css
 delete mode 100644 frontend/src/components/pages/ModerationPage/index.css
 delete mode 100644 frontend/src/components/pages/WalkthroughEditPage/index.css
 create mode 100644 frontend/src/components/pages/WalkthroughEditPage/index.module.css

diff --git a/backend/trcustoms/utils.py b/backend/trcustoms/utils.py
index bb00547c..f00d35ba 100644
--- a/backend/trcustoms/utils.py
+++ b/backend/trcustoms/utils.py
@@ -101,7 +101,6 @@ def parse_date_range(
 ) -> tuple[datetime | None, datetime | None] | None:
     date_min: datetime | None = None
     date_max: datetime | None = None
-    print("source", source, flush=1)
     if source and (
         match := re.match(r"^(?P<year>\d{4})(?:-(?P<month>\d{1,2}))?$", source)
     ):
diff --git a/frontend/src/App.css b/frontend/src/App.css
deleted file mode 100644
index 74b5e053..00000000
--- a/frontend/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b7549c3e..d4d6b188 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,3 @@
-import "./App.css";
 import "./themes.css";
 import { useEffect } from "react";
 import { Routes } from "react-router-dom";
diff --git a/frontend/src/components/common/AuditLogSearch/index.tsx b/frontend/src/components/common/AuditLogSearch/index.tsx
index 4ec4f972..ecf9c52a 100644
--- a/frontend/src/components/common/AuditLogSearch/index.tsx
+++ b/frontend/src/components/common/AuditLogSearch/index.tsx
@@ -239,14 +239,16 @@ const AuditLogSearch = ({
     >
       {({ submitForm, resetForm }) => (
         <Form className="ChildMarginClear">
-          <SectionHeader className={styles.header}>
-            Search filter
-            <Link
-              className={styles.resetButton}
-              onClick={() => handleClear(resetForm)}
-            >
-              (reset)
-            </Link>
+          <SectionHeader>
+            <span className={styles.header}>
+              Search filter
+              <Link
+                className={styles.resetButton}
+                onClick={() => handleClear(resetForm)}
+              >
+                (reset)
+              </Link>
+            </span>
           </SectionHeader>
 
           <div className={styles.form}>
diff --git a/frontend/src/components/common/AuditLogTable/index.css b/frontend/src/components/common/AuditLogTable/index.css
deleted file mode 100644
index cd0c165d..00000000
--- a/frontend/src/components/common/AuditLogTable/index.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.AuditLogTable .DataTable--row td {
-  border-bottom: 1px solid var(--label-bg-color);
-}
-.AuditLogTable--changeList {
-  list-style-type: none;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-}
-.AuditLogTable--changeListItem {
-  display: block;
-  margin: 0;
-  padding: 0;
-}
-
-.AuditLogTable--created,
-.AuditLogTable--author {
-  white-space: nowrap;
-  width: 10%;
-}
-
-.AuditLogTable--object {
-  width: 40%;
-}
-.AuditLogTable--changes {
-  width: 40%;
-}
-
-.AuditLogTable--changesWrapper {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0 0.5rem;
-}
-.AuditLogTable--requiresAction {
-  white-space: nowrap;
-}
diff --git a/frontend/src/components/common/AuditLogTable/index.module.css b/frontend/src/components/common/AuditLogTable/index.module.css
new file mode 100644
index 00000000..8afdd758
--- /dev/null
+++ b/frontend/src/components/common/AuditLogTable/index.module.css
@@ -0,0 +1,26 @@
+.table :global td {
+  border-bottom: 1px solid var(--label-bg-color);
+}
+
+.table :global .created,
+.table :global .author {
+  white-space: nowrap;
+  width: 10%;
+}
+
+.table :global .object {
+  width: 40%;
+}
+.table :global .changes {
+  width: 40%;
+}
+
+.changesWrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0 0.5rem;
+}
+.requiresAction {
+  white-space: nowrap;
+}
diff --git a/frontend/src/components/common/AuditLogTable/index.tsx b/frontend/src/components/common/AuditLogTable/index.tsx
index de8b064b..82d7f5e7 100644
--- a/frontend/src/components/common/AuditLogTable/index.tsx
+++ b/frontend/src/components/common/AuditLogTable/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useQuery } from "react-query";
 import type { DataTableColumn } from "src/components/common/DataTable";
 import { DataTable } from "src/components/common/DataTable";
@@ -192,10 +192,10 @@ const AuditLogTable = ({
       name: "changes",
       label: "Changes",
       itemElement: ({ item }) => (
-        <span className="AuditLogTable--changesWrapper">
+        <span className={styles.changesWrapper}>
           {item.changes.join(" ")}
           {item.is_action_required && (
-            <span className="AuditLogTable--requiresAction">
+            <span className={styles.requiresAction}>
               <IconExclamation /> Requires action
             </span>
           )}
@@ -207,17 +207,15 @@ const AuditLogTable = ({
   const itemKey = (auditLog: AuditLogListing) => `${auditLog.id}`;
 
   return (
-    <div className="AuditLogTable">
-      <DataTable
-        className="AuditLogTable"
-        queryName="auditLogs"
-        columns={columns}
-        itemKey={itemKey}
-        searchQuery={searchQuery}
-        searchFunc={AuditLogService.searchAuditLogs}
-        onSearchQueryChange={onSearchQueryChange}
-      />
-    </div>
+    <DataTable
+      className={styles.table}
+      queryName="auditLogs"
+      columns={columns}
+      itemKey={itemKey}
+      searchQuery={searchQuery}
+      searchFunc={AuditLogService.searchAuditLogs}
+      onSearchQueryChange={onSearchQueryChange}
+    />
   );
 };
 
diff --git a/frontend/src/components/common/Checkbox/index.css b/frontend/src/components/common/Checkbox/index.module.css
similarity index 86%
rename from frontend/src/components/common/Checkbox/index.css
rename to frontend/src/components/common/Checkbox/index.module.css
index 24f9dc9e..706b8e9d 100644
--- a/frontend/src/components/common/Checkbox/index.css
+++ b/frontend/src/components/common/Checkbox/index.module.css
@@ -1,8 +1,8 @@
-.Checkbox--label {
+.label {
   cursor: pointer;
 }
 
-.Checkbox--input {
+.input {
   position: relative;
   cursor: pointer;
   width: 20px;
@@ -12,7 +12,7 @@
   margin: 0 0.5rem 0 0;
   display: inline-flex;
 }
-.Checkbox--input:before {
+.input:before {
   content: "";
   display: block;
   position: absolute;
@@ -25,7 +25,7 @@
   color: var(--input-fg-color);
   box-sizing: border-box;
 }
-.Checkbox--input:checked:before {
+.input:checked:before {
   content: "";
   display: block;
   position: absolute;
@@ -36,7 +36,7 @@
   border-color: var(--button-bg-color);
   background-color: var(--button-bg-color);
 }
-.Checkbox--input:checked:after {
+.input:checked:after {
   content: "";
   display: block;
   width: 30%;
diff --git a/frontend/src/components/common/Checkbox/index.tsx b/frontend/src/components/common/Checkbox/index.tsx
index 6c6b0cff..8099dd91 100644
--- a/frontend/src/components/common/Checkbox/index.tsx
+++ b/frontend/src/components/common/Checkbox/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 
 interface CheckboxProps {
   label: string | React.ReactNode;
@@ -9,9 +9,9 @@ interface CheckboxProps {
 
 const Checkbox = ({ label, ...props }: CheckboxProps) => {
   return (
-    <div className="Checkbox">
-      <label className="Checkbox--label">
-        <input type="checkbox" className="Checkbox--input" {...props} />
+    <div>
+      <label className={styles.label}>
+        <input type="checkbox" className={styles.input} {...props} />
         {label}
       </label>
     </div>
diff --git a/frontend/src/components/common/DataList/index.css b/frontend/src/components/common/DataList/index.module.css
similarity index 56%
rename from frontend/src/components/common/DataList/index.css
rename to frontend/src/components/common/DataList/index.module.css
index 46d6f0b4..27e9c6aa 100644
--- a/frontend/src/components/common/DataList/index.css
+++ b/frontend/src/components/common/DataList/index.module.css
@@ -1,3 +1,3 @@
-.DataList--page {
+.page {
   display: contents;
 }
diff --git a/frontend/src/components/common/DataList/index.tsx b/frontend/src/components/common/DataList/index.tsx
index a95ae14c..5f2c5574 100644
--- a/frontend/src/components/common/DataList/index.tsx
+++ b/frontend/src/components/common/DataList/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useRef } from "react";
 import { Fragment } from "react";
 import { useEffect } from "react";
@@ -17,6 +17,7 @@ interface DataListProps<TItem, TQuery> {
   queryName: string;
   itemKey: (item: TItem) => string;
   itemView: (item: TItem) => React.ReactNode;
+  pageView?: (children: React.ReactNode) => React.ReactNode;
 
   searchQuery: TQuery;
   searchFunc: (
@@ -27,6 +28,11 @@ interface DataListProps<TItem, TQuery> {
   onSearchQueryChange?: ((searchQuery: TQuery) => void) | undefined;
 }
 
+interface ConcreteDataListProps<TItem, TQuery>
+  extends DataListProps<TItem, TQuery> {
+  pageView: (children: React.ReactNode) => React.ReactNode;
+}
+
 const PagedDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   className,
   searchQuery,
@@ -35,8 +41,9 @@ const PagedDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   onSearchQueryChange,
   itemKey,
   itemView,
+  pageView,
   queryName,
-}: DataListProps<TItem, TQuery>) => {
+}: ConcreteDataListProps<TItem, TQuery>) => {
   const result = useQuery<GenericSearchResult<TQuery, TItem>, Error>(
     [queryName, searchFunc, searchQuery],
     async () => searchFunc(searchQuery)
@@ -55,13 +62,13 @@ const PagedDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   }
 
   return (
-    <div className={`DataList ChildMarginClear ${className || ""}`}>
+    <div className={`ChildMarginClear ${className || ""}`}>
       {result.data.results.length ? (
-        <div className="DataList--body">
-          {result.data.results.map((item) => (
+        pageView(
+          result.data.results.map((item) => (
             <Fragment key={itemKey(item)}>{itemView(item)}</Fragment>
-          ))}
-        </div>
+          ))
+        )
       ) : (
         <p>There are no results to show.</p>
       )}
@@ -87,8 +94,9 @@ const InfiniteDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   onResultCountChange,
   itemKey,
   itemView,
+  pageView,
   queryName,
-}: DataListProps<TItem, TQuery>) => {
+}: ConcreteDataListProps<TItem, TQuery>) => {
   const result = useInfiniteQuery<GenericSearchResult<TQuery, TItem>, Error>(
     [queryName, searchQuery],
     async ({ pageParam }) => {
@@ -131,20 +139,20 @@ const InfiniteDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   }, [onResultCountChange, result]);
 
   return (
-    <div className={`DataList ChildMarginClear ${className}`}>
+    <div className={`ChildMarginClear ${className}`}>
       {result.data?.pages?.[0]?.total_count === 0 && (
         <p>There are no results to show.</p>
       )}
 
-      <div className="DataList--body">
-        {result.data?.pages?.map((result, i) => (
-          <div key={`body${i}`} className="DataList--page">
+      {pageView(
+        result.data?.pages?.map((result, i) => (
+          <div key={`body${i}`} className={styles.page}>
             {result.results.map((item) => (
               <Fragment key={itemKey(item)}>{itemView(item)}</Fragment>
             ))}
           </div>
-        ))}
-      </div>
+        ))
+      )}
 
       <span ref={infiniteScrollRef} />
 
@@ -153,14 +161,17 @@ const InfiniteDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   );
 };
 
-const DataList = <TItem extends {}, TQuery extends GenericSearchQuery>(
-  props: DataListProps<TItem, TQuery>
-) => {
+const DataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
+  pageView,
+  ...props
+}: DataListProps<TItem, TQuery>) => {
   const { infiniteScroll } = useSettings();
+  pageView ||= (children) => <div>{children}</div>;
+
   if (infiniteScroll) {
-    return <InfiniteDataList {...props} />;
+    return <InfiniteDataList pageView={pageView} {...props} />;
   }
-  return <PagedDataList {...props} />;
+  return <PagedDataList pageView={pageView} {...props} />;
 };
 
 export { PagedDataList, InfiniteDataList, DataList };
diff --git a/frontend/src/components/common/DataTable/index.css b/frontend/src/components/common/DataTable/index.css
deleted file mode 100644
index 4ba98c2b..00000000
--- a/frontend/src/components/common/DataTable/index.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.DataTable th button {
-  font-weight: bold;
-}
-.DataTable {
-  border-spacing: 0;
-  width: 100%;
-}
-.DataTable th,
-.DataTable td {
-  padding: 0.15rem 0.5rem;
-}
-.DataTable th:first-child,
-.DataTable td:first-child {
-  padding-left: 0;
-}
-.DataTable th:last-child,
-.DataTable td:last-child {
-  padding-right: 0;
-}
-
-.DataTable .DataTable--details td {
-  background: var(--box-bg-color);
-  padding: 1rem;
-}
-.DataTable .DataTable--details td > *:first-child {
-  margin-top: 0;
-}
-.DataTable .DataTable--details td > *:last-child {
-  margin-bottom: 0;
-}
diff --git a/frontend/src/components/common/DataTable/index.module.css b/frontend/src/components/common/DataTable/index.module.css
new file mode 100644
index 00000000..8434c0af
--- /dev/null
+++ b/frontend/src/components/common/DataTable/index.module.css
@@ -0,0 +1,19 @@
+.table :global th button {
+  font-weight: bold;
+}
+.table {
+  border-spacing: 0;
+  width: 100%;
+}
+.table :global th,
+.table :global td {
+  padding: 0.15rem 0.5rem;
+}
+.table :global th:first-child,
+.table :global td:first-child {
+  padding-left: 0;
+}
+.table :global th:last-child,
+.table :global td:last-child {
+  padding-right: 0;
+}
diff --git a/frontend/src/components/common/DataTable/index.tsx b/frontend/src/components/common/DataTable/index.tsx
index f31db461..b7568539 100644
--- a/frontend/src/components/common/DataTable/index.tsx
+++ b/frontend/src/components/common/DataTable/index.tsx
@@ -1,9 +1,10 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useRef } from "react";
 import { Fragment } from "react";
 import { useState } from "react";
 import { useQuery } from "react-query";
 import { useInfiniteQuery } from "react-query";
+import { Box } from "src/components/common/Box";
 import { Loader } from "src/components/common/Loader";
 import { Pager } from "src/components/common/Pager";
 import { SortLink } from "src/components/common/SortLink";
@@ -30,7 +31,7 @@ interface DataTableColumn<TItem> {
 }
 
 interface DataTableProps<TItem, TQuery> {
-  className?: string | undefined;
+  className?: string;
   queryName: string;
   itemKey: (item: TItem) => string;
   columns: DataTableColumn<TItem>[];
@@ -46,17 +47,16 @@ interface DataTableProps<TItem, TQuery> {
 }
 
 const DataTableHeader = <TItem extends {}, TQuery extends GenericSearchQuery>({
-  className,
   columns,
   searchQuery,
   onSearchQueryChange,
 }: DataTableProps<TItem, TQuery>) => {
   return (
-    <thead className="DataTable--header">
-      <tr className="DataTable--row">
+    <thead>
+      <tr>
         {columns.map((column) => (
           <th
-            className={className ? `${className}--${column.name}` : undefined}
+            className={column.name || ""}
             title={column.tooltip || undefined}
             key={`head-${column.name}`}
           >
@@ -81,7 +81,6 @@ const DataTableHeader = <TItem extends {}, TQuery extends GenericSearchQuery>({
 };
 
 const DataTableBody = <TItem extends {}, TQuery extends GenericSearchQuery>({
-  className,
   result,
   itemKey,
   columns,
@@ -106,28 +105,24 @@ const DataTableBody = <TItem extends {}, TQuery extends GenericSearchQuery>({
 
   if (message) {
     return (
-      <tbody className="DataTable--body">
-        <tr className="DataTable--row">
-          <td className="DataTable--cell" colSpan={100}>
-            {message}
-          </td>
+      <tbody>
+        <tr>
+          <td colSpan={100}>{message}</td>
         </tr>
       </tbody>
     );
   }
 
   return (
-    <tbody className="DataTable--body">
+    <tbody>
       {result?.data?.results.map((item) => {
         const key = itemKey(item);
         return (
           <Fragment key={key}>
-            <tr className="DataTable--row">
+            <tr>
               {columns.map((column) => (
                 <td
-                  className={`DataTable--cell ${
-                    className ? `${className}--${column.name}` : ""
-                  }`}
+                  className={column.name || ""}
                   title={column.itemTooltip?.(item) || undefined}
                   key={`${key}-${column.name}`}
                 >
@@ -140,8 +135,10 @@ const DataTableBody = <TItem extends {}, TQuery extends GenericSearchQuery>({
               ))}
             </tr>
             {detailsElement && activeRow === key && (
-              <tr className="DataTable--details">
-                <td colSpan={100}>{detailsElement(item)}</td>
+              <tr className={styles.details}>
+                <td colSpan={100}>
+                  <Box>{detailsElement(item)}</Box>
+                </td>
               </tr>
             )}
           </Fragment>
@@ -152,21 +149,15 @@ const DataTableBody = <TItem extends {}, TQuery extends GenericSearchQuery>({
 };
 
 const DataTableFooter = <TItem extends {}, TQuery extends GenericSearchQuery>({
-  className,
   columns,
 }: DataTableProps<TItem, TQuery>) => {
   return (
     <>
       {columns.some((column) => !!column.footer) && (
-        <tfoot className="DataTable--footer">
-          <tr className="DataTable--row">
+        <tfoot>
+          <tr>
             {columns.map((column) => (
-              <th
-                className={
-                  className ? `${className}--${column.name}` : undefined
-                }
-                key={`foot-${column.name}`}
-              >
+              <th key={`foot-${column.name}`} className={column.name || ""}>
                 {column.footer?.()}
               </th>
             ))}
@@ -195,7 +186,7 @@ const PagedDataTable = <TItem extends {}, TQuery extends GenericSearchQuery>(
 
   return (
     <>
-      <table className={`DataTable ${className}`}>
+      <table className={`${styles.table} ${className || ""}`}>
         <DataTableHeader {...props} />
         <DataTableBody result={result} {...props} />
         <DataTableFooter {...props} />
diff --git a/frontend/src/components/common/DefinitionList/index.css b/frontend/src/components/common/DefinitionList/index.css
deleted file mode 100644
index 4ce848da..00000000
--- a/frontend/src/components/common/DefinitionList/index.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.DefinitionList {
-  display: grid;
-  grid-template-columns: minmax(30%, min-content) auto;
-  gap: 0 1rem;
-}
-
-.DefinitionItemGroup {
-  display: contents;
-}
-.DefinitionItemGroup:not(:first-child) > .DefinitionItem:first-of-type > * {
-  margin-top: 1rem;
-}
-.DefinitionItemGroup:not(:last-child) > .DefinitionItem:last-of-type > * {
-  margin-bottom: 0.5rem;
-}
-.DefinitionItemGroup:first-child .SectionHeader {
-  margin: 0.5rem 0;
-}
-.DefinitionItemGroup .SectionHeader {
-  margin: 1.5rem 0 0.5rem 0;
-}
-
-.DefinitionItem {
-  display: contents;
-}
-.DefinitionItem.span {
-  display: block;
-  grid-column: 1 / span 2;
-}
-
-.DefinitionItem--term {
-  white-space: nowrap;
-  text-align: left;
-}
-.DefinitionItem--term:after {
-  content: ":";
-}
-.DefinitionItem--value {
-  margin: 0;
-  text-align: left;
-}
diff --git a/frontend/src/components/common/DefinitionList/index.module.css b/frontend/src/components/common/DefinitionList/index.module.css
new file mode 100644
index 00000000..7a0db5c9
--- /dev/null
+++ b/frontend/src/components/common/DefinitionList/index.module.css
@@ -0,0 +1,35 @@
+.list {
+  display: grid;
+  grid-template-columns: minmax(30%, min-content) auto;
+  gap: 0 1rem;
+}
+
+.group {
+  display: contents;
+}
+.group:not(:first-child) > .item:first-of-type > * {
+  margin-top: 1rem;
+}
+.group:not(:last-child) > .item:last-of-type > * {
+  margin-bottom: 0.5rem;
+}
+
+.item {
+  display: contents;
+}
+.item.span {
+  display: block;
+  grid-column: 1 / span 2;
+}
+
+.term {
+  white-space: nowrap;
+  text-align: left;
+}
+.term:after {
+  content: ":";
+}
+.value {
+  margin: 0;
+  text-align: left;
+}
diff --git a/frontend/src/components/common/DefinitionList/index.tsx b/frontend/src/components/common/DefinitionList/index.tsx
index ec5600a0..81a1b63f 100644
--- a/frontend/src/components/common/DefinitionList/index.tsx
+++ b/frontend/src/components/common/DefinitionList/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 
 interface DefinitionItemGroupProps {
   className?: string | undefined;
@@ -10,11 +10,12 @@ const DefinitionItemGroup = ({
   children,
 }: DefinitionItemGroupProps) => {
   return (
-    <div className={`DefinitionItemGroup ChildMarginClear ${className || ""}`}>
+    <div className={`${styles.group} ChildMarginClear ${className || ""}`}>
       {children}
     </div>
   );
 };
+
 interface DefinitionItemProps {
   span?: boolean | undefined;
   term?: React.ReactNode | undefined;
@@ -23,9 +24,9 @@ interface DefinitionItemProps {
 
 const DefinitionItem = ({ span, term, children }: DefinitionItemProps) => {
   return (
-    <div className={`DefinitionItem ${span ? "span" : ""}`}>
-      {term && <div className="DefinitionItem--term">{term}</div>}
-      <div className="DefinitionItem--value">{children}</div>
+    <div className={`${styles.item} ${span ? styles.span : ""}`}>
+      {term && <div className={styles.term}>{term}</div>}
+      <div className={styles.value}>{children}</div>
     </div>
   );
 };
@@ -35,7 +36,7 @@ interface DefinitionListProps {
 }
 
 const DefinitionList = ({ children }: DefinitionListProps) => {
-  return <div className="DefinitionList">{children}</div>;
+  return <div className={styles.list}>{children}</div>;
 };
 
 export { DefinitionItem, DefinitionItemGroup, DefinitionList };
diff --git a/frontend/src/components/common/EntitiesCheckboxes/index.module.css b/frontend/src/components/common/EntitiesCheckboxes/index.module.css
new file mode 100644
index 00000000..41a68e62
--- /dev/null
+++ b/frontend/src/components/common/EntitiesCheckboxes/index.module.css
@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
diff --git a/frontend/src/components/common/EntitiesCheckboxes/index.tsx b/frontend/src/components/common/EntitiesCheckboxes/index.tsx
index e2a83052..7e82a42d 100644
--- a/frontend/src/components/common/EntitiesCheckboxes/index.tsx
+++ b/frontend/src/components/common/EntitiesCheckboxes/index.tsx
@@ -1,3 +1,4 @@
+import styles from "./index.module.css";
 import { sortBy } from "lodash";
 import { useEffect } from "react";
 import { useState } from "react";
@@ -117,7 +118,7 @@ const EntitiesCheckboxes = <TEntity extends {}>({
   };
 
   return (
-    <div className="EntitiesCheckboxes">
+    <div className={styles.wrapper}>
       {header && (
         <FilterCheckboxesHeader onClear={handleClear}>
           {header}:
@@ -132,16 +133,18 @@ const EntitiesCheckboxes = <TEntity extends {}>({
         />
       )}
 
-      {visibleEntities.map((entity) => (
-        <Checkbox
-          key={getEntityId(entity)}
-          label={getEntityName(entity)}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            handleEntityChange(event, entity)
-          }
-          checked={value.includes(getEntityId(entity))}
-        />
-      ))}
+      <div>
+        {visibleEntities.map((entity) => (
+          <Checkbox
+            key={getEntityId(entity)}
+            label={getEntityName(entity)}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              handleEntityChange(event, entity)
+            }
+            checked={value.includes(getEntityId(entity))}
+          />
+        ))}
+      </div>
 
       {useFiltering && value.length === maxFilteredEntities && (
         <p>Cannot filter by any more items.</p>
diff --git a/frontend/src/components/common/FilePicker/Preview/index.module.css b/frontend/src/components/common/FilePicker/Preview/index.module.css
new file mode 100644
index 00000000..1192214e
--- /dev/null
+++ b/frontend/src/components/common/FilePicker/Preview/index.module.css
@@ -0,0 +1,3 @@
+.reorderSource {
+  opacity: 0.5;
+}
diff --git a/frontend/src/components/common/FilePicker/Preview/index.tsx b/frontend/src/components/common/FilePicker/Preview/index.tsx
new file mode 100644
index 00000000..18d5dacc
--- /dev/null
+++ b/frontend/src/components/common/FilePicker/Preview/index.tsx
@@ -0,0 +1,83 @@
+import styles from "./index.module.css";
+import { useEffect } from "react";
+import { useState } from "react";
+import { Link } from "src/components/common/Link";
+import { Loader } from "src/components/common/Loader";
+import type { UploadedFile } from "src/services/FileService";
+import { FileService } from "src/services/FileService";
+import { formatFileSize } from "src/utils/string";
+
+interface FilePickerPreviewProps {
+  uploadedFile: UploadedFile;
+}
+
+const FilePickerPreview = ({ uploadedFile }: FilePickerPreviewProps) => {
+  return <>{`${uploadedFile.md5sum} (${formatFileSize(uploadedFile.size)})`}</>;
+};
+
+interface FilePickerPreviewWrapperProps {
+  allowClear: boolean;
+  position: number;
+  fileId: number;
+  clearFile: (fileId: number) => void;
+  previewWidget: typeof FilePickerPreview;
+  reorderSourcePosition: number | null;
+  setReorderSourcePosition: (fileId: number | null) => void;
+}
+
+const FilePickerPreviewWrapper = ({
+  allowClear,
+  position,
+  fileId,
+  clearFile,
+  previewWidget,
+  reorderSourcePosition,
+  setReorderSourcePosition,
+}: FilePickerPreviewWrapperProps) => {
+  const [uploadedFile, setUploadedFile] = useState<UploadedFile | null>(null);
+
+  const ReorderEvents = {
+    onDragStart: (event: React.DragEvent) => {
+      window.setTimeout(() => {
+        setReorderSourcePosition(position);
+      }, 0);
+    },
+    onDragEnd: (event: React.DragEvent) => {
+      setReorderSourcePosition(null);
+    },
+  };
+
+  useEffect(() => {
+    const run = async () => {
+      setUploadedFile(await FileService.getFileById(fileId));
+    };
+    run();
+  }, [fileId]);
+
+  const classNames = [];
+  if (reorderSourcePosition === position) {
+    classNames.push(styles.reorderSource);
+  }
+
+  return (
+    <div>
+      <div
+        className={classNames.join(" ")}
+        draggable={true}
+        onDragStart={ReorderEvents.onDragStart}
+        onDragEnd={ReorderEvents.onDragEnd}
+      >
+        {uploadedFile ? previewWidget({ uploadedFile }) : <Loader />}
+        {allowClear && (
+          <>
+            <br />
+            <Link onClick={() => clearFile(fileId)}>Remove</Link>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export type { FilePickerPreviewProps };
+export { FilePickerPreviewWrapper, FilePickerPreview };
diff --git a/frontend/src/components/common/FilePicker/ReorderTarget/index.module.css b/frontend/src/components/common/FilePicker/ReorderTarget/index.module.css
new file mode 100644
index 00000000..913e07b5
--- /dev/null
+++ b/frontend/src/components/common/FilePicker/ReorderTarget/index.module.css
@@ -0,0 +1,28 @@
+.wrapper {
+  position: relative;
+  top: -1rem;
+  bottom: -1rem;
+  margin: -0.333rem;
+  width: 3px;
+}
+
+.wrapper.active {
+  background: var(--fg-color);
+}
+
+.zone {
+  position: absolute;
+  top: -2rem;
+  bottom: -2rem;
+  left: -6rem;
+  right: -6rem;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}
+
+.wrapper.dropActive .zone {
+  pointer-events: unset;
+}
diff --git a/frontend/src/components/common/FilePicker/ReorderTarget/index.tsx b/frontend/src/components/common/FilePicker/ReorderTarget/index.tsx
new file mode 100644
index 00000000..d4af6567
--- /dev/null
+++ b/frontend/src/components/common/FilePicker/ReorderTarget/index.tsx
@@ -0,0 +1,62 @@
+import styles from "./index.module.css";
+
+interface FilePickerReorderTargetProps {
+  position: number;
+  reorderSourcePosition: number | null;
+  reorderTargetPosition: number | null;
+  setReorderSourcePosition: (position: number | null) => void;
+  setReorderTargetPosition: (position: number | null) => void;
+  onReorder: (position: number, targetPosition: number) => void;
+}
+
+const FilePickerReorderTarget = ({
+  position,
+  reorderSourcePosition,
+  reorderTargetPosition,
+  setReorderSourcePosition,
+  setReorderTargetPosition,
+  onReorder,
+}: FilePickerReorderTargetProps) => {
+  const ReorderEvents = {
+    onDragEnter: (event: React.DragEvent) => {
+      setReorderTargetPosition(position);
+    },
+    onDragLeave: (event: React.DragEvent) => {
+      setReorderTargetPosition(null);
+    },
+    onDrop: (event: React.DragEvent) => {
+      setReorderSourcePosition(null);
+      setReorderTargetPosition(null);
+      if (reorderSourcePosition !== null && reorderTargetPosition !== null) {
+        const oldIndex = reorderSourcePosition;
+        const newIndex =
+          reorderTargetPosition > reorderSourcePosition
+            ? reorderTargetPosition - 1
+            : reorderTargetPosition;
+        onReorder(oldIndex, newIndex);
+      }
+    },
+  };
+
+  return (
+    <div
+      className={`${styles.wrapper} ${
+        reorderSourcePosition !== null ? styles.dropActive : ""
+      } ${reorderTargetPosition === position ? styles.active : ""}`}
+    >
+      <div
+        className={styles.zone}
+        draggable={false}
+        onDragStart={(event) => event.preventDefault()}
+        onDragOver={(event) => event.preventDefault()}
+        onDragEnter={(event) => ReorderEvents.onDragEnter(event)}
+        onDragLeave={(event) => ReorderEvents.onDragLeave(event)}
+        onDrop={(event) => ReorderEvents.onDrop(event)}
+      >
+        <div />
+      </div>
+    </div>
+  );
+};
+
+export { FilePickerReorderTarget };
diff --git a/frontend/src/components/common/FilePicker/index.css b/frontend/src/components/common/FilePicker/index.css
deleted file mode 100644
index 105bd8d0..00000000
--- a/frontend/src/components/common/FilePicker/index.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.FilePicker {
-  vertical-align: top;
-}
-
-.FilePicker .FileUploader--dropArea {
-  display: flex;
-  min-height: 6rem;
-  justify-content: center;
-  align-items: center;
-  width: 25rem;
-  background: var(--bg-color);
-  border: 3px dashed var(--button-bg-color);
-  line-height: 140%;
-  text-align: center;
-  cursor: pointer;
-  overflow: hidden;
-  word-wrap: break-word;
-}
-
-.FilePicker .FileUploader--input:disabled + .FileUploader--dropArea {
-  cursor: default;
-  opacity: 0.5;
-}
-
-.FilePicker .FileUploader--input:active + .FileUploader--dropArea,
-.FilePicker .FileUploader--input:focus + .FileUploader--dropArea,
-.FilePicker .FileUploader--dropArea.active {
-  border-color: var(--fg-color);
-}
-
-.FilePicker--previews {
-  margin-top: 0.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  text-align: center;
-}
-
-.FilePickerPreviewWrapper--reorderSource {
-  opacity: 0.5;
-}
-.FilePickerReorderTarget {
-  position: relative;
-  top: -1rem;
-  bottom: -1rem;
-  margin: -0.333rem;
-  width: 3px;
-}
-.FilePickerReorderTarget.active {
-  background: var(--fg-color);
-}
-.FilePickerReorderTarget--zone {
-  position: absolute;
-  top: -2rem;
-  bottom: -2rem;
-  left: -6rem;
-  right: -6rem;
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-}
-.FilePickerReorderTarget.dropActive .FilePickerReorderTarget--zone {
-  pointer-events: unset;
-}
diff --git a/frontend/src/components/common/FilePicker/index.module.css b/frontend/src/components/common/FilePicker/index.module.css
new file mode 100644
index 00000000..7b6ac967
--- /dev/null
+++ b/frontend/src/components/common/FilePicker/index.module.css
@@ -0,0 +1,37 @@
+.wrapper {
+  vertical-align: top;
+}
+
+.wrapper :global .FileUploader--dropArea {
+  display: flex;
+  min-height: 6rem;
+  justify-content: center;
+  align-items: center;
+  width: 25rem;
+  background: var(--bg-color);
+  border: 3px dashed var(--button-bg-color);
+  line-height: 140%;
+  text-align: center;
+  cursor: pointer;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+
+.wrapper :global .FileUploader--input:disabled + .FileUploader--dropArea {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.wrapper :global .FileUploader--input:active + .FileUploader--dropArea,
+.wrapper :global .FileUploader--input:focus + .FileUploader--dropArea,
+.wrapper :global .FileUploader--dropArea.active {
+  border-color: var(--fg-color);
+}
+
+.previews {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  text-align: center;
+}
diff --git a/frontend/src/components/common/FilePicker/index.tsx b/frontend/src/components/common/FilePicker/index.tsx
index 220bb192..ed102543 100644
--- a/frontend/src/components/common/FilePicker/index.tsx
+++ b/frontend/src/components/common/FilePicker/index.tsx
@@ -1,147 +1,15 @@
-import "./index.css";
+import { FilePickerPreview } from "./Preview";
+import type { FilePickerPreviewProps } from "./Preview";
+import { FilePickerPreviewWrapper } from "./Preview";
+import { FilePickerReorderTarget } from "./ReorderTarget";
+import styles from "./index.module.css";
 import { useCallback } from "react";
 import { Fragment } from "react";
-import { useEffect } from "react";
 import { useState } from "react";
 import { FileUploader } from "src/components/common/FileUploader";
-import { Link } from "src/components/common/Link";
-import { Loader } from "src/components/common/Loader";
 import type { UploadedFile } from "src/services/FileService";
-import { FileService } from "src/services/FileService";
 import { UploadType } from "src/services/FileService";
 import { extractErrorMessage } from "src/utils/misc";
-import { formatFileSize } from "src/utils/string";
-
-interface FilePickerPreviewProps {
-  uploadedFile: UploadedFile;
-}
-
-const FilePickerPreview = ({ uploadedFile }: FilePickerPreviewProps) => {
-  return <>{`${uploadedFile.md5sum} (${formatFileSize(uploadedFile.size)})`}</>;
-};
-
-interface FilePickerReorderTargetProps {
-  position: number;
-  reorderSourcePosition: number | null;
-  reorderTargetPosition: number | null;
-  setReorderSourcePosition: (position: number | null) => void;
-  setReorderTargetPosition: (position: number | null) => void;
-  onReorder: (position: number, targetPosition: number) => void;
-}
-
-const FilePickerReorderTarget = ({
-  position,
-  reorderSourcePosition,
-  reorderTargetPosition,
-  setReorderSourcePosition,
-  setReorderTargetPosition,
-  onReorder,
-}: FilePickerReorderTargetProps) => {
-  const ReorderEvents = {
-    onDragEnter: (event: React.DragEvent) => {
-      setReorderTargetPosition(position);
-    },
-    onDragLeave: (event: React.DragEvent) => {
-      setReorderTargetPosition(null);
-    },
-    onDrop: (event: React.DragEvent) => {
-      setReorderSourcePosition(null);
-      setReorderTargetPosition(null);
-      if (reorderSourcePosition !== null && reorderTargetPosition !== null) {
-        const oldIndex = reorderSourcePosition;
-        const newIndex =
-          reorderTargetPosition > reorderSourcePosition
-            ? reorderTargetPosition - 1
-            : reorderTargetPosition;
-        onReorder(oldIndex, newIndex);
-      }
-    },
-  };
-
-  return (
-    <div
-      className={`FilePickerReorderTarget ${
-        reorderSourcePosition !== null ? "dropActive" : ""
-      } ${reorderTargetPosition === position ? "active" : ""}`}
-    >
-      <div
-        className="FilePickerReorderTarget--zone"
-        draggable={false}
-        onDragStart={(event) => event.preventDefault()}
-        onDragOver={(event) => event.preventDefault()}
-        onDragEnter={(event) => ReorderEvents.onDragEnter(event)}
-        onDragLeave={(event) => ReorderEvents.onDragLeave(event)}
-        onDrop={(event) => ReorderEvents.onDrop(event)}
-      >
-        <div className="FilePickerReorderTarget--divider" />
-      </div>
-    </div>
-  );
-};
-
-interface FilePickerPreviewWrapperProps {
-  allowClear: boolean;
-  position: number;
-  fileId: number;
-  clearFile: (fileId: number) => void;
-  previewWidget: typeof FilePickerPreview;
-  reorderSourcePosition: number | null;
-  setReorderSourcePosition: (fileId: number | null) => void;
-}
-
-const FilePickerPreviewWrapper = ({
-  allowClear,
-  position,
-  fileId,
-  clearFile,
-  previewWidget,
-  reorderSourcePosition,
-  setReorderSourcePosition,
-}: FilePickerPreviewWrapperProps) => {
-  const [uploadedFile, setUploadedFile] = useState<UploadedFile | null>(null);
-
-  const ReorderEvents = {
-    onDragStart: (event: React.DragEvent) => {
-      window.setTimeout(() => {
-        setReorderSourcePosition(position);
-      }, 0);
-    },
-    onDragEnd: (event: React.DragEvent) => {
-      setReorderSourcePosition(null);
-    },
-  };
-
-  useEffect(() => {
-    const run = async () => {
-      setUploadedFile(await FileService.getFileById(fileId));
-    };
-    run();
-  }, [fileId]);
-
-  const classNames = [];
-  if (reorderSourcePosition === position) {
-    classNames.push("FilePickerPreviewWrapper--reorderSource");
-  }
-
-  return (
-    <div className="FilePickerPreviewWrapper">
-      <div
-        className={classNames.join(" ")}
-        draggable={true}
-        onDragStart={ReorderEvents.onDragStart}
-        onDragEnd={ReorderEvents.onDragEnd}
-      >
-        {uploadedFile ? previewWidget({ uploadedFile }) : <Loader />}
-        {allowClear && (
-          <>
-            <br />
-            <Link onClick={() => clearFile(fileId)}>Remove</Link>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
 
 interface FilePickerProps {
   uploadType: UploadType;
@@ -215,7 +83,7 @@ const FilePicker = ({
   );
 
   return (
-    <div className="FilePicker">
+    <div className={styles.wrapper}>
       <FileUploader
         uploadType={uploadType}
         allowMultiple={allowMultiple}
@@ -223,7 +91,7 @@ const FilePicker = ({
         onUploadError={handleUploadError}
         label={label}
       />
-      <div className="FilePicker--previews">
+      <div className={styles.previews}>
         {currentFileIds.length > 1 ? (
           <FilePickerReorderTarget
             position={0}
diff --git a/frontend/src/components/common/FilterCheckboxesHeader/index.css b/frontend/src/components/common/FilterCheckboxesHeader/index.module.css
similarity index 73%
rename from frontend/src/components/common/FilterCheckboxesHeader/index.css
rename to frontend/src/components/common/FilterCheckboxesHeader/index.module.css
index 2a5bdb5f..8e6361bf 100644
--- a/frontend/src/components/common/FilterCheckboxesHeader/index.css
+++ b/frontend/src/components/common/FilterCheckboxesHeader/index.module.css
@@ -1,4 +1,4 @@
-.FilterCheckboxesHeader {
+.wrapper {
   display: flex;
   justify-content: space-between;
   margin: 0.5rem 0;
diff --git a/frontend/src/components/common/FilterCheckboxesHeader/index.tsx b/frontend/src/components/common/FilterCheckboxesHeader/index.tsx
index 0feba79d..d0cd3a4f 100644
--- a/frontend/src/components/common/FilterCheckboxesHeader/index.tsx
+++ b/frontend/src/components/common/FilterCheckboxesHeader/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { Link } from "src/components/common/Link";
 
 interface FilterCheckboxesHeaderProps {
@@ -10,7 +10,7 @@ const FilterCheckboxesHeader = ({
   children,
 }: FilterCheckboxesHeaderProps) => {
   return (
-    <div className="FilterCheckboxesHeader">
+    <div className={styles.wrapper}>
       {children}
       <Link onClick={onClear}>(clear)</Link>
     </div>
diff --git a/frontend/src/components/common/FormGrid/index.module.css b/frontend/src/components/common/FormGrid/index.module.css
index 5223e192..68b410c3 100644
--- a/frontend/src/components/common/FormGrid/index.module.css
+++ b/frontend/src/components/common/FormGrid/index.module.css
@@ -47,9 +47,6 @@
 .grid .fieldsetFields :global .FormField {
   display: contents;
 }
-.grid .buttonsExtra :global .InfoMessage {
-  margin: 0;
-}
 
 .column .buttons {
   margin-top: 1rem;
diff --git a/frontend/src/components/common/FormGrid/index.tsx b/frontend/src/components/common/FormGrid/index.tsx
index 87f35cd7..3f5eb67b 100644
--- a/frontend/src/components/common/FormGrid/index.tsx
+++ b/frontend/src/components/common/FormGrid/index.tsx
@@ -1,6 +1,7 @@
 import styles from "./index.module.css";
 import { useFormikContext } from "formik";
 import { intersection } from "lodash";
+import { SectionHeader } from "src/components/common/Section";
 
 enum FormGridType {
   Column = "column",
@@ -73,7 +74,11 @@ const FormGridFieldSet = ({
 }: FormGridFieldSetProps) => {
   return (
     <div className={styles.fieldset}>
-      {title && <h2 className={styles.fieldsetTitle}>{title}</h2>}
+      {title && (
+        <div className={styles.fieldsetTitle}>
+          <SectionHeader>{title}</SectionHeader>
+        </div>
+      )}
       {header && <div className={styles.fieldsetHeader}>{header}</div>}
       <div className={styles.fieldsetFields}>{children}</div>
       {footer && <div className={styles.fieldsetHeader}>{footer}</div>}
diff --git a/frontend/src/components/common/GenreSearch/index.tsx b/frontend/src/components/common/GenreSearch/index.tsx
index 9c9285e7..e541fb5b 100644
--- a/frontend/src/components/common/GenreSearch/index.tsx
+++ b/frontend/src/components/common/GenreSearch/index.tsx
@@ -60,7 +60,7 @@ const GenreSearch = ({
       onSubmit={handleSubmit}
     >
       {({ submitForm }) => (
-        <Form className="GenreSearch">
+        <Form>
           <FormGrid gridType={FormGridType.Row}>
             <FormGridFieldSet>
               <TextFormField label="Search" name="search" />
diff --git a/frontend/src/components/common/GenresTable/index.css b/frontend/src/components/common/GenresTable/index.css
deleted file mode 100644
index 9ef39a6c..00000000
--- a/frontend/src/components/common/GenresTable/index.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.GenresTable--name {
-  width: 40%;
-}
-.GenresTable--level-count,
-.GenresTable--created,
-.GenresTable--updated {
-  width: 20%;
-}
diff --git a/frontend/src/components/common/GenresTable/index.module.css b/frontend/src/components/common/GenresTable/index.module.css
new file mode 100644
index 00000000..95aa9ee0
--- /dev/null
+++ b/frontend/src/components/common/GenresTable/index.module.css
@@ -0,0 +1,8 @@
+.table :global .name {
+  width: 40%;
+}
+.table :global .levelCount,
+.table :global .created,
+.table :global .updated {
+  width: 20%;
+}
diff --git a/frontend/src/components/common/GenresTable/index.tsx b/frontend/src/components/common/GenresTable/index.tsx
index 2a583036..e4e75e45 100644
--- a/frontend/src/components/common/GenresTable/index.tsx
+++ b/frontend/src/components/common/GenresTable/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useQuery } from "react-query";
 import type { DataTableColumn } from "src/components/common/DataTable";
 import { DataTable } from "src/components/common/DataTable";
@@ -67,7 +67,7 @@ const GenresTable = ({
       ),
     },
     {
-      name: "level-count",
+      name: "levelCount",
       sortKey: "level_count",
       label: "Usages",
       itemElement: ({ item }) => `${item.level_count}`,
@@ -90,7 +90,7 @@ const GenresTable = ({
 
   return (
     <DataTable
-      className="GenresTable"
+      className={styles.table}
       queryName="genres"
       columns={columns}
       itemKey={itemKey}
diff --git a/frontend/src/components/common/InfoMessage/index.css b/frontend/src/components/common/InfoMessage/index.module.css
similarity index 84%
rename from frontend/src/components/common/InfoMessage/index.css
rename to frontend/src/components/common/InfoMessage/index.module.css
index a88d8b67..b92fc5a7 100644
--- a/frontend/src/components/common/InfoMessage/index.css
+++ b/frontend/src/components/common/InfoMessage/index.module.css
@@ -1,8 +1,9 @@
-.InfoMessage {
+.wrapper {
   display: flex;
   margin: 0 0 1rem 0;
 }
-.InfoMessage--aside {
+
+.aside {
   background: var(--message-accent-bg-color);
   color: var(--message-accent-fg-color);
   padding: 0.5rem 1rem;
@@ -10,7 +11,9 @@
   align-items: center;
   font-size: 1.5rem;
 }
-.InfoMessage--text {
+
+.text {
+  flex-grow: 1;
   display: flex;
   align-items: center;
   background: var(--message-bg-color);
diff --git a/frontend/src/components/common/InfoMessage/index.tsx b/frontend/src/components/common/InfoMessage/index.tsx
index 2264d074..684b254c 100644
--- a/frontend/src/components/common/InfoMessage/index.tsx
+++ b/frontend/src/components/common/InfoMessage/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { IconInformationCircle } from "src/components/icons";
 import { IconExclamation } from "src/components/icons";
 
@@ -27,11 +27,11 @@ const InfoMessageIcon = ({ type }: InfoMessageIconProps) => {
 
 const InfoMessage = ({ type, children }: InfoMessageProps) => {
   return (
-    <div className="InfoMessage">
-      <aside className="InfoMessage--aside">
+    <div className={styles.wrapper}>
+      <aside className={styles.aside}>
         <InfoMessageIcon type={type} />
       </aside>
-      <div className="InfoMessage--text">{children}</div>
+      <div className={styles.text}>{children}</div>
     </div>
   );
 };
diff --git a/frontend/src/components/common/LevelList/index.css b/frontend/src/components/common/LevelList/index.module.css
similarity index 65%
rename from frontend/src/components/common/LevelList/index.css
rename to frontend/src/components/common/LevelList/index.module.css
index ddf1de7e..54f01089 100644
--- a/frontend/src/components/common/LevelList/index.css
+++ b/frontend/src/components/common/LevelList/index.module.css
@@ -1,8 +1,4 @@
-.DataTable .LevelList--image {
-  text-align: center;
-}
-
-.LevelView {
+.wrapper {
   padding: 0.5rem;
   background: var(--box-bg-color);
   display: flex;
@@ -10,48 +6,48 @@
   margin-bottom: 1rem;
 }
 @media (max-device-width: 600px) {
-  .LevelView {
+  .wrapper {
     flex-direction: column;
   }
 }
 
-.LevelView--coverLink {
+.coverLink {
   width: 15.5rem;
   display: block;
   position: relative;
   transition: opacity 300ms;
 }
-.LevelView--coverLink:hover {
+.coverLink:hover {
   opacity: 0.9;
 }
 @media (max-device-width: 600px) {
-  .LevelView--coverLink {
+  .coverLink {
     width: unset;
     aspect-ratio: 4/3;
   }
 }
 
-.LevelView--coverImage {
+.coverImage {
   position: absolute;
   object-fit: cover;
   width: 100%;
   height: 100%;
 }
 
-.LevelView--details {
+.details {
   width: 100%;
 }
-.LevelView--details small {
+.details small {
   line-height: 1.2rem;
   display: inline-block;
 }
 
-.LevelView--statusApproved {
+.status.approved {
   color: var(--success-fg-color);
 }
-.LevelView--statusPending {
+.status.pending {
   color: var(--warning-fg-color);
 }
-.LevelView--statusRejected {
+.status.rejected {
   color: var(--failure-fg-color);
 }
diff --git a/frontend/src/components/common/LevelList/index.tsx b/frontend/src/components/common/LevelList/index.tsx
index ee5aabd3..3317f560 100644
--- a/frontend/src/components/common/LevelList/index.tsx
+++ b/frontend/src/components/common/LevelList/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { DataList } from "src/components/common/DataList";
 import { LevelRating } from "src/components/common/LevelRating";
 import { Link } from "src/components/common/Link";
@@ -29,18 +29,18 @@ interface LevelViewProps {
 
 const LevelView = ({ showStatus, level }: LevelViewProps) => {
   return (
-    <article className="LevelView">
-      <Link className="LevelView--coverLink" to={`/levels/${level.id}`}>
+    <article className={styles.wrapper}>
+      <Link className={styles.coverLink} to={`/levels/${level.id}`}>
         {level.cover ? (
           <img
-            className="LevelView--coverImage"
+            className={styles.coverImage}
             src={level.cover.url}
             alt={level.name}
           />
         ) : null}
       </Link>
 
-      <div className="LevelView--details">
+      <div className={styles.details}>
         <strong>
           <LevelLink level={level} />
         </strong>{" "}
@@ -49,15 +49,15 @@ const LevelView = ({ showStatus, level }: LevelViewProps) => {
         {showStatus && (
           <>
             {level.is_approved ? (
-              <span className="LevelView--statusApproved">
+              <span className={`${styles.status} ${styles.approved}`}>
                 <IconBadgeCheck /> Approved!
               </span>
             ) : level.rejection_reason ? (
-              <span className="LevelView--statusRejected">
+              <span className={`${styles.status} ${styles.rejected}`}>
                 <IconXCircle /> Rejected
               </span>
             ) : (
-              <span className="LevelView--statusPending">
+              <span className={`${styles.status} ${styles.pending}`}>
                 <IconClock /> Pending approval
               </span>
             )}
@@ -109,7 +109,6 @@ const LevelList = ({
 
   return (
     <DataList
-      className="LevelList"
       queryName="levels"
       itemKey={itemKey}
       itemView={itemView}
diff --git a/frontend/src/components/common/LevelRating/index.css b/frontend/src/components/common/LevelRating/index.module.css
similarity index 60%
rename from frontend/src/components/common/LevelRating/index.css
rename to frontend/src/components/common/LevelRating/index.module.css
index fee1c99a..73372031 100644
--- a/frontend/src/components/common/LevelRating/index.css
+++ b/frontend/src/components/common/LevelRating/index.module.css
@@ -1,9 +1,9 @@
-.LevelRating.positive {
+.positive {
   color: var(--success-fg-color);
 }
-.LevelRating.neutral {
+.neutral {
   color: var(--warning-fg-color);
 }
-.LevelRating.negative {
+.negative {
   color: var(--failure-fg-color);
 }
diff --git a/frontend/src/components/common/LevelRating/index.tsx b/frontend/src/components/common/LevelRating/index.tsx
index 64b68dce..99d00954 100644
--- a/frontend/src/components/common/LevelRating/index.tsx
+++ b/frontend/src/components/common/LevelRating/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import type { RatingClass } from "src/types";
 
 interface LevelRatingProps {
@@ -9,13 +9,13 @@ const LevelRating = ({ ratingClass }: LevelRatingProps) => {
   if (!ratingClass) {
     return <>Not enough reviews</>;
   }
-  let color: string = "neutral";
+  let style = styles.neutral;
   if (ratingClass.position > 0) {
-    color = "positive";
+    style = styles.positive;
   } else if (ratingClass.position < 0) {
-    color = "negative";
+    style = styles.negative;
   }
-  return <span className={`LevelRating ${color}`}>{ratingClass.name}</span>;
+  return <span className={style}>{ratingClass.name}</span>;
 };
 
 export { LevelRating };
diff --git a/frontend/src/components/common/LevelSearchSidebar/index.module.css b/frontend/src/components/common/LevelSearchSidebar/index.module.css
index 286a7b09..5a6743f1 100644
--- a/frontend/src/components/common/LevelSearchSidebar/index.module.css
+++ b/frontend/src/components/common/LevelSearchSidebar/index.module.css
@@ -1,3 +1,8 @@
+.wrapper {
+  white-space: nowrap;
+  min-width: 16rem;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
@@ -12,15 +17,18 @@
   margin-bottom: 0.5rem;
 }
 
-.section :global .TextFormField--input {
+.section :global .DropDownFormField--select,
+.section :global .TextFormField--input,
+.section :global .TextInput--input {
   width: 100%;
 }
 
 .searchBar {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr min-content;
   align-items: flex-end;
 }
 
-.searchBar :global .TextFormField--input {
-  min-width: 0;
+.section :global p {
+  margin: 0;
 }
diff --git a/frontend/src/components/common/LevelSearchSidebar/index.tsx b/frontend/src/components/common/LevelSearchSidebar/index.tsx
index 1136b19c..e36796a4 100644
--- a/frontend/src/components/common/LevelSearchSidebar/index.tsx
+++ b/frontend/src/components/common/LevelSearchSidebar/index.tsx
@@ -199,12 +199,14 @@ const LevelSearchSidebar = ({
         onSubmit={handleSubmit}
       >
         {({ submitForm, resetForm }) => (
-          <Form className="ChildMarginClear">
-            <SectionHeader className={styles.header}>
-              Search filter
-              <Link className={styles.resetButton} onClick={handleClear}>
-                (reset)
-              </Link>
+          <Form className={`${styles.wrapper} ChildMarginClear`}>
+            <SectionHeader>
+              <span className={styles.header}>
+                Search filter
+                <Link className={styles.resetButton} onClick={handleClear}>
+                  (reset)
+                </Link>
+              </span>
             </SectionHeader>
 
             <PermissionGuard require={UserPermission.editLevels}>
diff --git a/frontend/src/components/common/LevelSidebar/index.tsx b/frontend/src/components/common/LevelSidebar/index.tsx
index 6682f92d..725b8637 100644
--- a/frontend/src/components/common/LevelSidebar/index.tsx
+++ b/frontend/src/components/common/LevelSidebar/index.tsx
@@ -70,7 +70,7 @@ const LevelSidebar = ({ level, reviewCount }: LevelSidebarProps) => {
     )[0]?.url || null;
 
   return (
-    <div className="LevelSidebar">
+    <div>
       <WalkthroughsModal
         level={level}
         isActive={isWalkthroughsModalActive}
diff --git a/frontend/src/components/common/Logo/index.module.css b/frontend/src/components/common/Logo/index.module.css
new file mode 100644
index 00000000..20339cde
--- /dev/null
+++ b/frontend/src/components/common/Logo/index.module.css
@@ -0,0 +1,4 @@
+.wrapper {
+  height: 100%;
+  display: block;
+}
diff --git a/frontend/src/components/common/Logo/index.tsx b/frontend/src/components/common/Logo/index.tsx
index 289165d4..2b9ac8a8 100644
--- a/frontend/src/components/common/Logo/index.tsx
+++ b/frontend/src/components/common/Logo/index.tsx
@@ -1,6 +1,8 @@
+import styles from "./index.module.css";
+
 const Logo = () => {
   return (
-    <svg className="Logo" viewBox="0 0 441.8 668.86">
+    <svg className={styles.wrapper} viewBox="0 0 441.8 668.86">
       <defs>
         <linearGradient id="gr1" x1="0" x2="0" y1="0" y2="1">
           <stop offset="20%" stopColor="#442111" />
diff --git a/frontend/src/components/common/MediumThumbnails/index.tsx b/frontend/src/components/common/MediumThumbnails/index.tsx
index 9d1c3a8b..5a56c6fe 100644
--- a/frontend/src/components/common/MediumThumbnails/index.tsx
+++ b/frontend/src/components/common/MediumThumbnails/index.tsx
@@ -134,10 +134,10 @@ const MediumThumbnail = ({
   const classNames = [styles.mediumThumbnail];
   switch (displayMode) {
     case DisplayMode.Cover:
-      classNames.push("cover");
+      classNames.push(styles.cover);
       break;
     case DisplayMode.Contain:
-      classNames.push("contain");
+      classNames.push(styles.contain);
       break;
   }
 
@@ -179,8 +179,8 @@ const MediumThumbnail = ({
   }
 
   return (
-    <div className="MediumThumbnail">
-      <div className="MediumThumbnail--thumb"></div>
+    <div className={styles.mediumThumbnail}>
+      <div className={styles.mediumThumbnailThumb}></div>
     </div>
   );
 };
diff --git a/frontend/src/components/common/NavBar/index.css b/frontend/src/components/common/NavBar/index.module.css
similarity index 72%
rename from frontend/src/components/common/NavBar/index.css
rename to frontend/src/components/common/NavBar/index.module.css
index 25762eb7..84f310c0 100644
--- a/frontend/src/components/common/NavBar/index.css
+++ b/frontend/src/components/common/NavBar/index.module.css
@@ -1,4 +1,4 @@
-.NavBar--list {
+.list {
   margin: 0;
   padding: 0;
   list-style-type: none;
@@ -6,85 +6,83 @@
   align-items: center;
   flex-wrap: wrap;
 }
-.NavBar--listItem {
+.listItem {
   display: inline-block;
   margin: 0;
   padding: 0;
 }
 
 @media (max-device-width: 1280px) {
-  .NavBar--secondary .NavBar--grow {
+  .secondary .grow {
     flex-grow: 0;
   }
-  .NavBar--secondary .NavBar--list {
+  .secondary .list {
     justify-content: center;
   }
 }
 
-.NavBar--nav {
+.nav {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
 }
-.NavBar--grow {
+.grow {
   flex-grow: 1;
 }
 
-.NavBar h1,
-.NavBar p {
+.header {
   margin: 0;
   padding: 0;
-}
-.NavBar h1 {
   font-family: "Chakra Petch";
   font-weight: normal;
   font-size: calc(min(2.8rem, 10vmin));
   margin: 0;
   padding: 0;
 }
-.NavBar h1 a {
+.headerLink {
   text-decoration: none;
   display: flex;
   gap: 0.25rem;
   align-items: center;
 }
 
-.NavBar--primary {
+.primary {
   margin: 0.5rem 0 0.25rem 0;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: space-between;
 }
-.NavBar--primary .NavBar--list {
+.primary .list {
   margin: 0 1rem;
   gap: 0.5rem 1rem;
   justify-content: flex-end;
 }
 
-.NavBar--secondary {
+.secondary {
   background: var(--navbar-bg-color);
 }
-.NavBar--secondary .NavBar--listItem a {
+.secondary .listItem a {
   padding: 0.3rem 1rem;
   display: inline-block;
 }
-.NavBar--secondary .NavBar--listItem a.active {
+.secondary .listItem :global .active {
   background: var(--navbar-active-tab-bg-color);
   color: var(--navbar-active-tab-fg-color);
 }
 
-.NavBar .Logo {
+.logo {
+  display: block;
   height: 4rem;
   margin: 0 0.8rem 0 0.7rem;
 }
 
-.NavBar--userPicLink {
+.userPicLink {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-.NavBar--userPic {
+.userPic {
   width: 2rem;
 }
diff --git a/frontend/src/components/common/NavBar/index.tsx b/frontend/src/components/common/NavBar/index.tsx
index b8c8ea60..464caae8 100644
--- a/frontend/src/components/common/NavBar/index.tsx
+++ b/frontend/src/components/common/NavBar/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useContext } from "react";
 import type { LinkProps } from "react-router-dom";
 import { Link } from "react-router-dom";
@@ -39,37 +39,36 @@ const NavBar = () => {
 
   return (
     <div className="MainContainer">
-      <div className="NavBar">
-        <nav className="NavBar--primary">
-          <h1>
-            <Link to={"/"}>
-              <Logo />
+      <div className={styles.wrapper}>
+        <nav className={styles.primary}>
+          <h1 className={styles.header}>
+            <Link className={styles.headerLink} to={"/"}>
+              <div className={styles.logo}>
+                <Logo />
+              </div>
               TRCustoms.org
             </Link>
           </h1>
-          <ul className="NavBar--list NavBar--grow">
+          <ul className={`${styles.list} ${styles.grow}`}>
             {user ? (
               <>
-                <li className="NavBar--listItem">
-                  <Link
-                    className="NavBar--userPicLink"
-                    to={`/users/${user.id}`}
-                  >
+                <li className={styles.listItem}>
+                  <Link className={styles.userPicLink} to={`/users/${user.id}`}>
                     <UserPicture user={user} />
                     {user.username}
                   </Link>
                 </li>
-                <li className="NavBar--listItem">
+                <li className={styles.listItem}>
                   <Link to={"/logout"}>Log out</Link>
                 </li>
               </>
             ) : (
               <>
-                <li className="NavBar--listItem">Not logged in.</li>
-                <li className="NavBar--listItem">
+                <li className={styles.listItem}>Not logged in.</li>
+                <li className={styles.listItem}>
                   <Link to={"/login"}>Log in</Link>
                 </li>
-                <li className="NavBar--listItem">
+                <li className={styles.listItem}>
                   <Link to={"/register"}>Register</Link>
                 </li>
               </>
@@ -77,40 +76,40 @@ const NavBar = () => {
           </ul>
         </nav>
 
-        <nav className="NavBar--secondary">
-          <ul className="NavBar--list">
-            <li className="NavBar--listItem">
+        <nav className={styles.secondary}>
+          <ul className={styles.list}>
+            <li className={styles.listItem}>
               <NavLink to={"/"}>Home</NavLink>
             </li>
-            <li className="NavBar--listItem">
+            <li className={styles.listItem}>
               <LevelsNavLink to={"/levels"}>Levels</LevelsNavLink>
             </li>
-            <li className="NavBar--listItem">
+            <li className={styles.listItem}>
               <NavLink to={"/genres"}>Genres</NavLink>
             </li>
-            <li className="NavBar--listItem">
+            <li className={styles.listItem}>
               <NavLink to={"/tags"}>Tags</NavLink>
             </li>
-            <li className="NavBar--listItem">
+            <li className={styles.listItem}>
               <NavLink to={"/reviews"}>Reviews</NavLink>
             </li>
-            <li className="NavBar--listItem">
+            <li className={styles.listItem}>
               <NavLink to={"/about"}>About</NavLink>
             </li>
 
-            <li className="NavBar--listItem NavBar--grow" />
+            <li className={`${styles.listItem} ${styles.grow}`} />
 
             <PermissionGuard require={UserPermission.uploadLevels}>
-              <li className="NavBar--listItem">
+              <li className={styles.listItem}>
                 <NavLink to={"/levels/upload"}>Upload level</NavLink>
               </li>
             </PermissionGuard>
             <PermissionGuard require={UserPermission.editLevels}>
-              <li className="NavBar--listItem">
+              <li className={styles.listItem}>
                 <NavLink to={"/mod"}>Moderate</NavLink>
               </li>
             </PermissionGuard>
-            <li className="NavBar--listItem">
+            <li className={styles.listItem}>
               <NavLink to={"/settings"}>Settings</NavLink>
             </li>
           </ul>
diff --git a/frontend/src/components/common/NestedLegalese/LegaleseItem/index.module.css b/frontend/src/components/common/NestedLegalese/LegaleseItem/index.module.css
new file mode 100644
index 00000000..c11890a0
--- /dev/null
+++ b/frontend/src/components/common/NestedLegalese/LegaleseItem/index.module.css
@@ -0,0 +1,32 @@
+.wrapper {
+  display: flex;
+  gap: 0.5rem;
+}
+.wrapper :global p {
+  margin: 0;
+}
+.body {
+  flex: 1;
+}
+.body > *:first-child {
+  margin-top: 0;
+}
+.body > *:last-child {
+  margin-bottom: 0;
+}
+
+.listItem {
+  margin: 0.5rem 0;
+}
+.list {
+  list-style: none;
+  margin: 0.5rem 0;
+  padding: 0;
+}
+.wrapper[data-nesting="1"] {
+  margin-bottom: 2rem;
+}
+
+.number:empty {
+  display: none;
+}
diff --git a/frontend/src/components/common/NestedLegalese/LegaleseItem/index.tsx b/frontend/src/components/common/NestedLegalese/LegaleseItem/index.tsx
new file mode 100644
index 00000000..8fa0d19d
--- /dev/null
+++ b/frontend/src/components/common/NestedLegalese/LegaleseItem/index.tsx
@@ -0,0 +1,71 @@
+import styles from "./index.module.css";
+import { SectionHeader } from "src/components/common/Section";
+
+interface LegaleseEntry {
+  title?: string | undefined;
+  description?: React.ReactNode | string | undefined;
+  bullets?: boolean | undefined;
+  children?: LegaleseEntry[] | undefined;
+}
+
+interface LegaleseItemProps {
+  prefix: string;
+  parent?: LegaleseEntry | undefined;
+  entry: LegaleseEntry;
+  currentNumber: number[];
+}
+
+const LegaleseItem = ({
+  prefix,
+  entry,
+  parent,
+  currentNumber,
+}: LegaleseItemProps) => {
+  const childElems = entry.children?.map((subEntry, i) => (
+    <li className={styles.listItem} key={i}>
+      <LegaleseItem
+        prefix={prefix}
+        parent={entry}
+        entry={subEntry}
+        currentNumber={[...currentNumber, i + 1]}
+      />
+    </li>
+  ));
+
+  const formattedNumber = parent?.bullets
+    ? "\u25cf"
+    : currentNumber.length
+    ? currentNumber.join(".") + "."
+    : "";
+
+  return (
+    <div
+      data-nesting={currentNumber.length}
+      className={styles.wrapper}
+      id={`${prefix}--${currentNumber.join(".")}`}
+    >
+      {currentNumber.length === 1 ? (
+        <div className={styles.body}>
+          <SectionHeader>
+            {formattedNumber} {entry.title}
+          </SectionHeader>
+          {entry.description && <p>{entry.description}</p>}
+          {childElems && <ul className={styles.list}>{childElems}</ul>}
+        </div>
+      ) : (
+        <>
+          <div className={styles.number}>{formattedNumber}</div>
+          <div className={styles.body}>
+            {entry.title && <span>{entry.title}</span>}
+            {entry.description && <p>{entry.description}</p>}
+            {childElems && <ul className={styles.list}>{childElems}</ul>}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export type { LegaleseItemProps };
+export type { LegaleseEntry };
+export { LegaleseItem };
diff --git a/frontend/src/components/common/NestedLegalese/LegaleseTOCItem/index.tsx b/frontend/src/components/common/NestedLegalese/LegaleseTOCItem/index.tsx
new file mode 100644
index 00000000..bcf108da
--- /dev/null
+++ b/frontend/src/components/common/NestedLegalese/LegaleseTOCItem/index.tsx
@@ -0,0 +1,31 @@
+import type { LegaleseItemProps } from "../LegaleseItem";
+
+const LegaleseTOCItem = ({
+  prefix,
+  entry,
+  currentNumber,
+}: LegaleseItemProps) => {
+  const children = entry?.children?.filter((subEntry) => !!subEntry.title);
+  const childElems = children?.map((subEntry, i) => (
+    <li key={i}>
+      <LegaleseTOCItem
+        prefix={prefix}
+        parent={entry}
+        entry={subEntry}
+        currentNumber={[...currentNumber, i + 1]}
+      />
+    </li>
+  ));
+  return (
+    <div>
+      {entry.title && (
+        <a href={`#${prefix}--${currentNumber.join(".")}`}>{entry.title}</a>
+      )}
+      {!entry.bullets &&
+        childElems &&
+        (entry.bullets ? <ul>{childElems}</ul> : <ol>{childElems}</ol>)}
+    </div>
+  );
+};
+
+export { LegaleseTOCItem };
diff --git a/frontend/src/components/common/NestedLegalese/index.css b/frontend/src/components/common/NestedLegalese/index.css
deleted file mode 100644
index a0c82ee4..00000000
--- a/frontend/src/components/common/NestedLegalese/index.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.NestedLegalese--wrapper {
-  display: flex;
-  gap: 0.5rem 2rem;
-}
-
-@media (max-device-width: 1280px) {
-  .NestedLegalese--wrapper {
-    flex-wrap: wrap;
-  }
-}
-
-.NestedLegalese--toc {
-  white-space: nowrap;
-  flex-grow: 1;
-}
-
-.LegaleseItem {
-  display: flex;
-  gap: 0.5rem;
-}
-.LegaleseItem p {
-  margin: 0;
-}
-.LegaleseItem--body {
-  flex: 1;
-}
-.LegaleseItem--body > *:first-child {
-  margin-top: 0;
-}
-.LegaleseItem--body > *:last-child {
-  margin-bottom: 0;
-}
-
-.LegaleseItem--listItem {
-  margin: 0.5rem 0;
-}
-.LegaleseItem--list {
-  list-style: none;
-  margin: 0.5rem 0;
-  padding: 0;
-}
-.LegaleseItem[data-nesting="1"] {
-  margin-bottom: 2rem;
-}
-
-.LegaleseItem--number:empty {
-  display: none;
-}
diff --git a/frontend/src/components/common/NestedLegalese/index.module.css b/frontend/src/components/common/NestedLegalese/index.module.css
new file mode 100644
index 00000000..b0fad1d4
--- /dev/null
+++ b/frontend/src/components/common/NestedLegalese/index.module.css
@@ -0,0 +1,15 @@
+.wrapper {
+  display: flex;
+  gap: 0.5rem 2rem;
+}
+
+@media (max-device-width: 1280px) {
+  .wrapper {
+    flex-wrap: wrap;
+  }
+}
+
+.toc {
+  white-space: nowrap;
+  flex-grow: 1;
+}
diff --git a/frontend/src/components/common/NestedLegalese/index.tsx b/frontend/src/components/common/NestedLegalese/index.tsx
index bebbceb8..a6177767 100644
--- a/frontend/src/components/common/NestedLegalese/index.tsx
+++ b/frontend/src/components/common/NestedLegalese/index.tsx
@@ -1,112 +1,29 @@
-import "./index.css";
+import type { LegaleseEntry } from "./LegaleseItem";
+import { LegaleseItem } from "./LegaleseItem";
+import { LegaleseTOCItem } from "./LegaleseTOCItem";
+import styles from "./index.module.css";
 import { SectionHeader } from "src/components/common/Section";
 import { SidebarBox } from "src/components/common/SidebarBox";
 
-interface LegaleseEntry {
-  title?: string | undefined;
-  description?: React.ReactNode | string | undefined;
-  bullets?: boolean | undefined;
-  children?: LegaleseEntry[] | undefined;
-}
-
-interface LegaleseItemProps {
-  parent?: LegaleseEntry | undefined;
-  entry: LegaleseEntry;
-  currentNumber: number[];
-}
-
-const LegaleseItem = ({ entry, parent, currentNumber }: LegaleseItemProps) => {
-  const childElems = entry.children?.map((subEntry, i) => (
-    <li className="LegaleseItem--listItem" key={i}>
-      <LegaleseItem
-        parent={entry}
-        entry={subEntry}
-        currentNumber={[...currentNumber, i + 1]}
-      />
-    </li>
-  ));
-
-  const formattedNumber = parent?.bullets
-    ? "\u25cf"
-    : currentNumber.length
-    ? currentNumber.join(".") + "."
-    : "";
-
-  return (
-    <div
-      data-nesting={currentNumber.length}
-      className="LegaleseItem"
-      id={`tos-${currentNumber.join(".")}`}
-    >
-      {currentNumber.length === 1 ? (
-        <div className="LegaleseItem--body">
-          <SectionHeader className="LegaleseItem--title">
-            {formattedNumber} {entry.title}
-          </SectionHeader>
-          {entry.description && (
-            <p className="LegaleseItem--description">{entry.description}</p>
-          )}
-          {childElems && <ul className="LegaleseItem--list">{childElems}</ul>}
-        </div>
-      ) : (
-        <>
-          <div className="LegaleseItem--number">{formattedNumber}</div>
-          <div className="LegaleseItem--body">
-            {entry.title && (
-              <span className="LegaleseItem--title">{entry.title}</span>
-            )}
-            {entry.description && (
-              <p className="LegaleseItem--description">{entry.description}</p>
-            )}
-            {childElems && <ul className="LegaleseItem--list">{childElems}</ul>}
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-const LegaleseTOCItem = ({ entry, currentNumber }: LegaleseItemProps) => {
-  const children = entry?.children?.filter((subEntry) => !!subEntry.title);
-  const childElems = children?.map((subEntry, i) => (
-    <li key={i}>
-      <LegaleseTOCItem
-        parent={entry}
-        entry={subEntry}
-        currentNumber={[...currentNumber, i + 1]}
-      />
-    </li>
-  ));
-  return (
-    <div className="LegaleseTOCItem">
-      {entry.title && (
-        <a href={`#tos-${currentNumber.join(".")}`}>{entry.title}</a>
-      )}
-      {!entry.bullets &&
-        childElems &&
-        (entry.bullets ? <ul>{childElems}</ul> : <ol>{childElems}</ol>)}
-    </div>
-  );
-};
-
 interface NestedLegaleseProps {
+  prefix: string;
   title?: string | undefined;
   entry: LegaleseEntry;
 }
 
-const NestedLegalese = ({ title, entry }: NestedLegaleseProps) => {
+const NestedLegalese = ({ prefix, title, entry }: NestedLegaleseProps) => {
   return (
-    <div className="NestedLegalese--wrapper">
-      <aside className="NestedLegalese--toc">
+    <div className={styles.wrapper}>
+      <aside className={styles.toc}>
         <SidebarBox>
           <SectionHeader>Table of Contents</SectionHeader>
-          <LegaleseTOCItem currentNumber={[]} entry={entry} />
+          <LegaleseTOCItem prefix={prefix} currentNumber={[]} entry={entry} />
         </SidebarBox>
       </aside>
 
-      <div className="NestedLegalese--content">
+      <div>
         {title && <h1>{title}</h1>}
-        <LegaleseItem currentNumber={[]} entry={entry} />
+        <LegaleseItem prefix={prefix} currentNumber={[]} entry={entry} />
       </div>
     </div>
   );
diff --git a/frontend/src/components/common/PicturePicker/index.css b/frontend/src/components/common/PicturePicker/index.module.css
similarity index 52%
rename from frontend/src/components/common/PicturePicker/index.css
rename to frontend/src/components/common/PicturePicker/index.module.css
index bb804879..20271b9f 100644
--- a/frontend/src/components/common/PicturePicker/index.css
+++ b/frontend/src/components/common/PicturePicker/index.module.css
@@ -1,10 +1,10 @@
-.PicturePickerPreview {
+.wrapper {
   width: 15rem;
   aspect-ratio: calc(4 / 3);
 }
-.PicturePickerPreview.cover {
+.wrapper.cover {
   object-fit: cover;
 }
-.PicturePickerPreview.contain {
+.wrapper.contain {
   object-fit: contain;
 }
diff --git a/frontend/src/components/common/PicturePicker/index.tsx b/frontend/src/components/common/PicturePicker/index.tsx
index afc30b1a..65e8505b 100644
--- a/frontend/src/components/common/PicturePicker/index.tsx
+++ b/frontend/src/components/common/PicturePicker/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { FilePicker } from "src/components/common/FilePicker";
 import type { FilePickerPreviewProps } from "src/components/common/FilePicker";
 import { UploadType } from "src/services/FileService";
@@ -23,13 +23,13 @@ const PicturePickerPreview = ({
   uploadedFile,
   displayMode,
 }: PicturePickerPreviewProps) => {
-  const classNames = ["PicturePickerPreview"];
+  const classNames = [styles.wrapper];
   switch (displayMode) {
     case DisplayMode.Cover:
-      classNames.push("cover");
+      classNames.push(styles.cover);
       break;
     case DisplayMode.Contain:
-      classNames.push("contain");
+      classNames.push(styles.contain);
       break;
   }
   return (
diff --git a/frontend/src/components/common/ProgressBar/index.css b/frontend/src/components/common/ProgressBar/index.module.css
similarity index 78%
rename from frontend/src/components/common/ProgressBar/index.css
rename to frontend/src/components/common/ProgressBar/index.module.css
index 4792cf57..5e88344c 100644
--- a/frontend/src/components/common/ProgressBar/index.css
+++ b/frontend/src/components/common/ProgressBar/index.module.css
@@ -1,7 +1,8 @@
-.ProgressBar {
+.wrapper {
   text-align: center;
 }
-.ProgressBar--container {
+
+.indicator {
   height: 0.5rem;
   max-width: 10rem;
   margin: 0.5rem auto;
@@ -10,7 +11,7 @@
   position: relative;
 }
 
-.ProgressBar--indicator {
+.indicatorFill {
   height: 100%;
   background: var(--label-bg-color);
 }
diff --git a/frontend/src/components/common/ProgressBar/index.tsx b/frontend/src/components/common/ProgressBar/index.tsx
index 95b4013d..0a934971 100644
--- a/frontend/src/components/common/ProgressBar/index.tsx
+++ b/frontend/src/components/common/ProgressBar/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 
 interface ProgressBarProps {
   title: string;
@@ -7,12 +7,12 @@ interface ProgressBarProps {
 
 const ProgressBar = ({ title, percentCompleted }: ProgressBarProps) => {
   return (
-    <div className="ProgressBar">
+    <div className={styles.wrapper}>
       {title} {`${Math.round(percentCompleted * 100) / 100}% complete`}
       <br />
-      <div className="ProgressBar--container">
+      <div className={styles.indicator}>
         <div
-          className="ProgressBar--indicator"
+          className={styles.indicatorFill}
           style={{ width: `${percentCompleted}%` }}
         ></div>
       </div>
diff --git a/frontend/src/components/common/ReviewForm/index.css b/frontend/src/components/common/ReviewForm/index.css
deleted file mode 100644
index 971ec5cf..00000000
--- a/frontend/src/components/common/ReviewForm/index.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.ReviewForm--questionnaireDisclaimer {
-  margin-bottom: 0;
-}
-
-.ReviewForm .InfoMessage {
-  margin: 0.5rem 0 0 0;
-}
diff --git a/frontend/src/components/common/ReviewForm/index.tsx b/frontend/src/components/common/ReviewForm/index.tsx
index dcdd0c7f..cf49f829 100644
--- a/frontend/src/components/common/ReviewForm/index.tsx
+++ b/frontend/src/components/common/ReviewForm/index.tsx
@@ -1,4 +1,3 @@
-import "./index.css";
 import { AxiosError } from "axios";
 import axios from "axios";
 import type { FormikHelpers } from "formik";
@@ -72,10 +71,7 @@ const ReviewQuestionFormField = ({
       }`}
     >
       {templateQuestion.answers.map((templateAnswer) => (
-        <div
-          key={templateAnswer.id}
-          className="ReviewQuestionFormField--answerRow"
-        >
+        <div key={templateAnswer.id}>
           <RadioboxFormField
             label={templateAnswer.answer_text}
             name={name}
@@ -219,7 +215,7 @@ const ReviewForm = ({ level, review, onGoBack, onSubmit }: ReviewFormProps) => {
         status?.success ? (
           <div className="FormFieldSuccess">{status.success}</div>
         ) : (
-          <Form className="ReviewForm">
+          <Form>
             <FormGrid gridType={FormGridType.Column}>
               <FormGridFieldSet title="Review">
                 <InfoMessage type={InfoMessageType.Info}>
diff --git a/frontend/src/components/common/ReviewSearchSidebar/index.tsx b/frontend/src/components/common/ReviewSearchSidebar/index.tsx
index cf249e14..f6a503c3 100644
--- a/frontend/src/components/common/ReviewSearchSidebar/index.tsx
+++ b/frontend/src/components/common/ReviewSearchSidebar/index.tsx
@@ -7,7 +7,7 @@ import { SidebarBox } from "src/components/common/SidebarBox";
 const ReviewSearchSidebar = () => {
   return (
     <SidebarBox>
-      <Section className="ChildMarginClear">
+      <Section>
         <SectionHeader>Reviewer longue</SectionHeader>
 
         <Link to={`/reviews/authors`}>
diff --git a/frontend/src/components/common/ReviewStats/index.css b/frontend/src/components/common/ReviewStats/index.module.css
similarity index 72%
rename from frontend/src/components/common/ReviewStats/index.css
rename to frontend/src/components/common/ReviewStats/index.module.css
index e0e6dcf9..52d75819 100644
--- a/frontend/src/components/common/ReviewStats/index.css
+++ b/frontend/src/components/common/ReviewStats/index.module.css
@@ -1,8 +1,8 @@
-.ReviewStats {
+.wrapper {
   margin-top: 1rem;
 }
 
-.ReviewStats--list {
+.list {
   position: relative;
   display: flex;
   margin: 0.25rem 0;
@@ -12,7 +12,7 @@
   border-bottom: 2px solid var(--section-border-color);
 }
 
-.ReviewStats--listItem {
+.listItem {
   display: flex;
   align-items: flex-end;
   width: 100%;
@@ -22,30 +22,30 @@
   padding: 0.2rem 0.2rem 0 0.2rem;
 }
 
-.ReviewStats--indicator {
+.listItem:hover {
+  filter: var(--stats-hover-filter);
+}
+
+.indicator {
   width: 100%;
   min-height: 0.25rem;
   display: block;
   background: var(--stats-neutral-bar-color);
 }
 
-.ReviewStats--indicatorFill.negative {
-  background: var(--stats-negative-bar-color);
+.indicatorFill {
+  width: 100%;
+  height: 100%;
 }
 
-.ReviewStats--indicatorFill.positive {
-  background: var(--stats-positive-bar-color);
+.indicatorFill.negative {
+  background: var(--stats-negative-bar-color);
 }
 
-.ReviewStats--indicatorFill {
-  width: 100%;
-  height: 100%;
+.indicatorFill.positive {
+  background: var(--stats-positive-bar-color);
 }
 
-.ReviewStats--footer {
+.footer {
   text-align: center;
 }
-
-.ReviewStats--listItem:hover {
-  filter: var(--stats-hover-filter);
-}
diff --git a/frontend/src/components/common/ReviewStats/index.tsx b/frontend/src/components/common/ReviewStats/index.tsx
index 10daf614..9bd70893 100644
--- a/frontend/src/components/common/ReviewStats/index.tsx
+++ b/frontend/src/components/common/ReviewStats/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { sortBy } from "lodash";
 import { useState } from "react";
 import { useContext } from "react";
@@ -32,27 +32,29 @@ const ReviewStats = () => {
   );
 
   return (
-    <div className="ReviewStats">
-      <ul className="ReviewStats--list">
+    <div className={styles.wrapper}>
+      <ul className={styles.list}>
         {sortBy(config.review_stats, (item) => item.rating_class.position).map(
           (item) => (
             <li
               key={item.rating_class.name}
-              className="ReviewStats--listItem"
+              className={styles.listItem}
               onMouseEnter={() => handleMouseEnter(item)}
               onMouseLeave={() => handleMouseLeave(item)}
             >
               <div
                 data-rating-position={item.rating_class.position}
                 title={item.rating_class.name}
-                className="ReviewStats--indicator"
+                className={styles.indicator}
                 style={{
                   height: `${(item.level_count * 100) / maxLevelCount}%`,
                 }}
               >
                 <div
-                  className={`ReviewStats--indicatorFill ${
-                    item.rating_class.position > 0 ? "positive" : "negative"
+                  className={`${styles.indicatorFill} ${
+                    item.rating_class.position > 0
+                      ? styles.positive
+                      : styles.negative
                   }`}
                   style={{
                     opacity: `${
@@ -67,9 +69,7 @@ const ReviewStats = () => {
           )
         )}
       </ul>
-      <footer className="ReviewStats--footer">
-        {tooltip || defaultTooltip}
-      </footer>
+      <footer className={styles.footer}>{tooltip || defaultTooltip}</footer>
     </div>
   );
 };
diff --git a/frontend/src/components/common/ReviewsList/index.css b/frontend/src/components/common/ReviewsList/index.module.css
similarity index 75%
rename from frontend/src/components/common/ReviewsList/index.css
rename to frontend/src/components/common/ReviewsList/index.module.css
index 29cdf848..2ba52c33 100644
--- a/frontend/src/components/common/ReviewsList/index.css
+++ b/frontend/src/components/common/ReviewsList/index.module.css
@@ -1,46 +1,46 @@
-.Review {
+.wrapper {
   display: grid;
   margin-bottom: 3rem;
   grid-template-rows: auto auto auto;
   background: var(--box-bg-color);
 }
-.Review.positive .Review--badge {
+.wrapper.positive .badge {
   background-color: var(--reviews-positive-bg-color);
 }
-.Review.neutral .Review--badge {
+.wrapper.neutral .badge {
   background-color: var(--reviews-neutral-bg-color);
 }
-.Review.negative .Review--badge {
+.wrapper.negative .badge {
   background-color: var(--reviews-negative-bg-color);
 }
 
-.Review--content {
+.content {
   padding: 1rem;
   border-bottom: 2px solid;
 }
-.Review.positive .Review--content {
+.wrapper.positive .content {
   border-bottom-color: var(--reviews-positive-bg-color);
 }
-.Review.neutral .Review--content {
+.wrapper.neutral .content {
   border-bottom-color: var(--reviews-neutral-bg-color);
 }
-.Review.negative .Review--content {
+.wrapper.negative .content {
   border-bottom-color: var(--reviews-negative-bg-color);
 }
 
-.Review--badge {
+.badge {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 1rem;
 }
-.Review--badge .Icon {
+.badge :global .Icon {
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   font-size: 2rem;
 }
 
-.Review--footer {
+.footer {
   padding: 1rem;
   display: flex;
   flex-direction: row;
@@ -51,13 +51,13 @@
   gap: 1rem 2rem;
 }
 
-.Review--buttons {
+.buttons {
   display: flex;
   gap: 0.5rem;
   align-items: flex-end;
 }
 
-.Review--userLink {
+.userLink {
   display: flex;
   max-width: 100%;
   align-items: center;
@@ -65,11 +65,11 @@
   flex-basis: 0;
 }
 
-.Review--userPic {
+.userPic {
   width: 2rem;
 }
 
-.Review--footerInfo {
+.footer .info {
   display: flex;
   align-items: center;
   gap: 0.5rem 2rem;
@@ -77,7 +77,7 @@
   flex-wrap: wrap;
 }
 @media (max-device-width: 800px) {
-  .Review--footerInfo {
+  .footer .info {
     flex-direction: column;
     align-items: flex-start;
   }
diff --git a/frontend/src/components/common/ReviewsList/index.tsx b/frontend/src/components/common/ReviewsList/index.tsx
index 622d79d3..79ef8dcd 100644
--- a/frontend/src/components/common/ReviewsList/index.tsx
+++ b/frontend/src/components/common/ReviewsList/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useState } from "react";
 import { ReviewDeleteButton } from "src/components/buttons/ReviewDeleteButton";
 import { ReviewEditButton } from "src/components/buttons/ReviewEditButton";
@@ -36,12 +36,12 @@ interface ReviewViewProps {
 
 const ReviewView = ({ review, showLevels, showExcerpts }: ReviewViewProps) => {
   const [isExcerptExpanded, setIsExcerptExpanded] = useState(false);
-  const classNames = ["Review"];
+  const classNames = [styles.wrapper];
 
   const position = review.rating_class?.position || 0;
   let badge: React.ReactNode;
   if (position > 0) {
-    classNames.push("positive");
+    classNames.push(styles.positive);
     badge = (
       <>
         <IconThumbUp />
@@ -49,7 +49,7 @@ const ReviewView = ({ review, showLevels, showExcerpts }: ReviewViewProps) => {
       </>
     );
   } else if (position < 0) {
-    classNames.push("negative");
+    classNames.push(styles.negative);
     badge = (
       <>
         <IconThumbDown />
@@ -57,7 +57,7 @@ const ReviewView = ({ review, showLevels, showExcerpts }: ReviewViewProps) => {
       </>
     );
   } else {
-    classNames.push("neutral");
+    classNames.push(styles.neutral);
     badge = (
       <>
         <IconDotsCircleHorizontal />
@@ -79,11 +79,11 @@ const ReviewView = ({ review, showLevels, showExcerpts }: ReviewViewProps) => {
 
   return (
     <div className={classNames.join(" ")}>
-      <div className="Review--badge">{badge}</div>
+      <div className={styles.badge}>{badge}</div>
 
-      <div className="Review--content ChildMarginClear">
+      <div className={`${styles.content} ChildMarginClear`}>
         {showLevels ? (
-          <p className="ReviewsList--level">
+          <p>
             Review on <LevelLink level={review.level} />
           </p>
         ) : null}
@@ -100,11 +100,13 @@ const ReviewView = ({ review, showLevels, showExcerpts }: ReviewViewProps) => {
         )}
       </div>
 
-      <footer className="Review--footer">
-        <div className="Review--footerInfo">
-          <UserLink className="Review--userLink" user={review.author}>
+      <footer className={styles.footer}>
+        <div className={styles.info}>
+          <UserLink className={styles.userLink} user={review.author}>
             <>
-              <UserPicture user={review.author} />
+              <div className={styles.userPic}>
+                <UserPicture user={review.author} />
+              </div>
               {review.author.username}
             </>
           </UserLink>
@@ -114,7 +116,7 @@ const ReviewView = ({ review, showLevels, showExcerpts }: ReviewViewProps) => {
           <span>Posted on: {formatDate(review.created)}</span>
         </div>
 
-        <div className="Review--buttons">
+        <div className={styles.buttons}>
           <PermissionGuard
             require={UserPermission.editReviews}
             owningUsers={[review.author]}
@@ -143,7 +145,6 @@ const ReviewsList = ({
       searchQuery={searchQuery}
       onResultCountChange={onResultCountChange}
       queryName="reviews"
-      className="ReviewsList"
       onSearchQueryChange={onSearchQueryChange}
       searchFunc={ReviewService.searchReviews}
       itemKey={(review: ReviewListing) => review.id.toString()}
diff --git a/frontend/src/components/common/Section/index.css b/frontend/src/components/common/Section/index.module.css
similarity index 67%
rename from frontend/src/components/common/Section/index.css
rename to frontend/src/components/common/Section/index.module.css
index 4454774b..114676f3 100644
--- a/frontend/src/components/common/Section/index.css
+++ b/frontend/src/components/common/Section/index.module.css
@@ -1,14 +1,14 @@
-.Section {
+.section {
   margin: 0 0 2rem 0;
 }
-.Section > *:last-child {
+.section > *:last-child {
   margin-bottom: 0;
 }
 
-.SectionHeader {
+.header {
   margin: 0 0 0.5rem 0;
   border-bottom: 2px solid var(--section-border-color);
 }
-.SectionHeader + p {
+.header + p {
   margin-top: 0.5rem;
 }
diff --git a/frontend/src/components/common/Section/index.tsx b/frontend/src/components/common/Section/index.tsx
index 3a37f86d..1daec12a 100644
--- a/frontend/src/components/common/Section/index.tsx
+++ b/frontend/src/components/common/Section/index.tsx
@@ -1,25 +1,23 @@
-import "./index.css";
+import styles from "./index.module.css";
 
 interface SectionProps {
-  className?: string | undefined;
   children: React.ReactNode;
 }
 
 interface SectionHeaderProps {
-  className?: string | undefined;
   children: React.ReactNode;
 }
 
-const Section = ({ className, children }: SectionProps) => {
+const Section = ({ children }: SectionProps) => {
   return (
-    <section className={`Section ${className || ""} ChildMarginClear`}>
+    <section className={`${styles.section} ChildMarginClear`}>
       {children}
     </section>
   );
 };
 
-const SectionHeader = ({ className, children }: SectionHeaderProps) => {
-  return <h2 className={`SectionHeader ${className || ""}`}>{children}</h2>;
+const SectionHeader = ({ children }: SectionHeaderProps) => {
+  return <h2 className={styles.header}>{children}</h2>;
 };
 
 export { Section, SectionHeader };
diff --git a/frontend/src/components/common/SortLink/index.css b/frontend/src/components/common/SortLink/index.module.css
similarity index 55%
rename from frontend/src/components/common/SortLink/index.css
rename to frontend/src/components/common/SortLink/index.module.css
index c87a9c56..373adf47 100644
--- a/frontend/src/components/common/SortLink/index.css
+++ b/frontend/src/components/common/SortLink/index.module.css
@@ -1,10 +1,10 @@
-.SortLink {
+.link {
   white-space: nowrap;
 }
-.SortLink--indicator {
+.indicator {
   margin-left: 0.25rem;
   display: none;
 }
-.SortLink--active .SortLink--indicator {
+.link.active .indicator {
   display: inline-block;
 }
diff --git a/frontend/src/components/common/SortLink/index.tsx b/frontend/src/components/common/SortLink/index.tsx
index e95c5ed8..68b453e3 100644
--- a/frontend/src/components/common/SortLink/index.tsx
+++ b/frontend/src/components/common/SortLink/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { Link } from "src/components/common/Link";
 import { IconSortDescending } from "src/components/icons";
 import { IconSortAscending } from "src/components/icons";
@@ -39,10 +39,10 @@ const SortLink = ({
   return (
     <Link
       onClick={handleButtonClick}
-      className={`link ${isActive ? "SortLink SortLink--active" : "SortLink"}`}
+      className={`${styles.link} ${isActive ? styles.active : ""}`}
     >
       {children}
-      <span className="SortLink--indicator">
+      <span className={styles.indicator}>
         {descending ? <IconSortDescending /> : <IconSortAscending />}
       </span>
     </Link>
diff --git a/frontend/src/components/common/TabSwitch/index.css b/frontend/src/components/common/TabSwitch/index.module.css
similarity index 60%
rename from frontend/src/components/common/TabSwitch/index.css
rename to frontend/src/components/common/TabSwitch/index.module.css
index 50ca24d4..366fbbe2 100644
--- a/frontend/src/components/common/TabSwitch/index.css
+++ b/frontend/src/components/common/TabSwitch/index.module.css
@@ -1,36 +1,36 @@
-.TabSwitch--nav {
+.nav {
   display: flex;
   list-style-type: none;
   margin: 0 0 -1px 0;
   padding: 0;
 }
-.TabSwitch--navItem {
+.navItem {
   margin: 0;
   padding: 0;
 }
-.TabSwitch--navItemLink {
+.navItemLink {
   display: inline-block;
   padding: 0.5rem 1rem;
   cursor: pointer;
   background: var(--tab-switch-inactive-bg-color);
   color: var(--tab-switch-inactive-fg-color);
 }
-.TabSwitch--navItem.active .TabSwitch--navItemLink {
+.navItem.active .navItemLink {
   background: var(--tab-switch-active-bg-color);
   color: var(--tab-switch-active-fg-color);
 }
 
-.TabSwitch--content {
+.content {
   padding: 0.5rem;
   background: var(--tab-switch-active-bg-color);
 }
-.TabSwitch--contentItem:not(.active) {
-  display: none;
-}
 
-.TabSwitch--contentItem > *:first-child {
-  margin-top: 0;
+.contentItem {
+  width: 100%;
+  overflow-y: auto;
+  display: flex;
+  min-height: var(--min-tab-height);
 }
-.TabSwitch--contentItem > *:last-child {
-  margin-bottom: 0;
+.contentItem:not(.active) {
+  display: none;
 }
diff --git a/frontend/src/components/common/TabSwitch/index.tsx b/frontend/src/components/common/TabSwitch/index.tsx
index cdb30e22..e64accb9 100644
--- a/frontend/src/components/common/TabSwitch/index.tsx
+++ b/frontend/src/components/common/TabSwitch/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useState } from "react";
 
 interface TabPage {
@@ -18,19 +18,19 @@ const TabSwitch = ({ tabs }: TabSwitchProps) => {
   };
 
   return (
-    <div className="TabSwitch">
+    <div className={styles.wrapper}>
       <nav>
-        <ul className="TabSwitch--nav">
+        <ul className={styles.nav}>
           {tabs.map((tab, i) => (
             <li
-              className={`TabSwitch--navItem ${
-                i === activeTab ? "active" : ""
+              className={`${styles.navItem} ${
+                i === activeTab ? styles.active : ""
               }`}
               key={i}
             >
               <span
                 role="button"
-                className="TabSwitch--navItemLink"
+                className={styles.navItemLink}
                 onClick={() => handleTabClick(i)}
               >
                 {tab.label}
@@ -39,12 +39,12 @@ const TabSwitch = ({ tabs }: TabSwitchProps) => {
           ))}
         </ul>
       </nav>
-      <div className="TabSwitch--content">
+      <div className={styles.content}>
         {tabs.map((tab, i) => (
           <div
-            className={`TabSwitch--contentItem ${
-              i === activeTab ? "active" : ""
-            }`}
+            className={`${styles.contentItem} ${
+              i === activeTab ? styles.active : ""
+            } ChildMarginClear`}
             key={i}
           >
             {tab.content}
diff --git a/frontend/src/components/common/TagSearch/index.tsx b/frontend/src/components/common/TagSearch/index.tsx
index 5ad4fa36..ee9284e8 100644
--- a/frontend/src/components/common/TagSearch/index.tsx
+++ b/frontend/src/components/common/TagSearch/index.tsx
@@ -60,7 +60,7 @@ const TagSearch = ({
       onSubmit={handleSubmit}
     >
       {({ submitForm, resetForm }) => (
-        <Form className="TagListPage--container">
+        <Form>
           <FormGrid gridType={FormGridType.Row}>
             <FormGridFieldSet>
               <TextFormField label="Search" name="search" />
diff --git a/frontend/src/components/common/TagsTable/index.module.css b/frontend/src/components/common/TagsTable/index.module.css
index 4962efa6..85bd1752 100644
--- a/frontend/src/components/common/TagsTable/index.module.css
+++ b/frontend/src/components/common/TagsTable/index.module.css
@@ -1,9 +1,9 @@
-:global .TagsTable--name {
+.table :global .name {
   width: 40%;
 }
-:global .TagsTable--level-count,
-:global .TagsTable--created,
-:global .TagsTable--updated {
+.table :global .levelCount,
+.table :global .created,
+.table :global .updated {
   width: 20%;
 }
 
diff --git a/frontend/src/components/common/TagsTable/index.tsx b/frontend/src/components/common/TagsTable/index.tsx
index 1b4b68e6..db20091c 100644
--- a/frontend/src/components/common/TagsTable/index.tsx
+++ b/frontend/src/components/common/TagsTable/index.tsx
@@ -75,7 +75,7 @@ const TagsTable = ({ searchQuery, onSearchQueryChange }: TagsTableProps) => {
       ),
     },
     {
-      name: "level-count",
+      name: "levelCount",
       sortKey: "level_count",
       label: "Usages",
       itemElement: ({ item }) => `${item.level_count}`,
@@ -98,7 +98,7 @@ const TagsTable = ({ searchQuery, onSearchQueryChange }: TagsTableProps) => {
 
   return (
     <DataTable
-      className="TagsTable"
+      className={styles.table}
       queryName="tags"
       columns={columns}
       itemKey={itemKey}
diff --git a/frontend/src/components/common/UserFancyList/index.css b/frontend/src/components/common/UserFancyList/index.module.css
similarity index 63%
rename from frontend/src/components/common/UserFancyList/index.css
rename to frontend/src/components/common/UserFancyList/index.module.css
index cdbdfc8e..d39c2fe7 100644
--- a/frontend/src/components/common/UserFancyList/index.css
+++ b/frontend/src/components/common/UserFancyList/index.module.css
@@ -1,15 +1,25 @@
-.UserFancyList > .DataList--body {
-  gap: 1rem;
+.page {
   display: grid;
   grid-template-columns: repeat(
     auto-fit,
     minmax(min(100%/3, max(12rem, 100%/6)), 1fr)
   );
+  gap: 1rem;
 }
 
-.UserView {
+.item {
+  flex-direction: column;
   background: var(--box-bg-color);
   padding: 0.5rem;
+  text-align: center;
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.username {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/frontend/src/components/common/UserFancyList/index.tsx b/frontend/src/components/common/UserFancyList/index.tsx
index c296c29d..f9f37c5f 100644
--- a/frontend/src/components/common/UserFancyList/index.tsx
+++ b/frontend/src/components/common/UserFancyList/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { DataList } from "src/components/common/DataList";
 import { UserPictureMode } from "src/components/common/UserPicture";
 import { UserPicture } from "src/components/common/UserPicture";
@@ -14,12 +14,12 @@ interface UserViewProps {
 
 const UserView = ({ user }: UserViewProps) => {
   return (
-    <article className="UserView">
-      <UserLink user={user}>
+    <article className={styles.item}>
+      <UserLink className={styles.link} user={user}>
         <UserPicture user={user} mode={UserPictureMode.Medium} />
-        <br />
-        {user.username}
+        <span className={styles.username}>{user.username}</span>
       </UserLink>
+
       <div>
         Reviews posted: {user.reviewed_level_count}
         <br />
@@ -38,15 +38,18 @@ const UserFancyList = ({
   searchQuery,
   onSearchQueryChange,
 }: UserFancyListProps) => {
-  const itemView = (user: UserListing) => <UserView user={user} />;
-
   const itemKey = (user: UserListing) => `${user.id}`;
+  const itemView = (user: UserListing) => <UserView user={user} />;
+  const pageView = (children: React.ReactNode) => (
+    <div className={styles.page}>{children}</div>
+  );
 
   return (
     <DataList
-      className="UserFancyList"
+      className={styles.wrapper}
       queryName="users"
       itemKey={itemKey}
+      pageView={pageView}
       itemView={itemView}
       searchQuery={searchQuery}
       searchFunc={UserService.searchUsers}
diff --git a/frontend/src/components/common/UserForm/index.tsx b/frontend/src/components/common/UserForm/index.tsx
index 5d9970d5..1a869392 100644
--- a/frontend/src/components/common/UserForm/index.tsx
+++ b/frontend/src/components/common/UserForm/index.tsx
@@ -238,7 +238,7 @@ const UserForm = ({ user, onGoBack, onSubmit }: UserFormProps) => {
         !user && status?.success ? (
           <div className="FormFieldSuccess">{status.success}</div>
         ) : (
-          <Form className="Form">
+          <Form>
             <FormGrid>
               <FormGridFieldSet title="Basic information">
                 <TextFormField
diff --git a/frontend/src/components/common/UserList/index.css b/frontend/src/components/common/UserList/index.css
deleted file mode 100644
index 8211565f..00000000
--- a/frontend/src/components/common/UserList/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.UserList--username {
-  width: 24%;
-}
-.UserList--firstName,
-.UserList--lastName {
-  width: 18%;
-}
-.UserList--created,
-.UserList--lastLogin,
-.UserList--updated,
-.UserList--authoredLevelCount {
-  width: 10%;
-  white-space: nowrap;
-}
diff --git a/frontend/src/components/common/UserList/index.module.css b/frontend/src/components/common/UserList/index.module.css
new file mode 100644
index 00000000..bf289aad
--- /dev/null
+++ b/frontend/src/components/common/UserList/index.module.css
@@ -0,0 +1,14 @@
+.table :global .username {
+  width: 24%;
+}
+.table :global .firstName,
+.table :global .lastName {
+  width: 18%;
+}
+.table :global .created,
+.table :global .lastLogin,
+.table :global .updated,
+.table :global .authoredLevelCount {
+  width: 10%;
+  white-space: nowrap;
+}
diff --git a/frontend/src/components/common/UserList/index.tsx b/frontend/src/components/common/UserList/index.tsx
index d9bd2680..55d529af 100644
--- a/frontend/src/components/common/UserList/index.tsx
+++ b/frontend/src/components/common/UserList/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import type { DataTableColumn } from "src/components/common/DataTable";
 import { DataTable } from "src/components/common/DataTable";
 import { UserLink } from "src/components/links/UserLink";
@@ -63,7 +63,7 @@ const UserList = ({ searchQuery, onSearchQueryChange }: UserListProps) => {
 
   return (
     <DataTable
-      className="UserList"
+      className={styles.table}
       queryName="users"
       columns={columns}
       itemKey={itemKey}
diff --git a/frontend/src/components/common/WalkthroughForm/index.tsx b/frontend/src/components/common/WalkthroughForm/index.tsx
index 44213f74..0c60c21a 100644
--- a/frontend/src/components/common/WalkthroughForm/index.tsx
+++ b/frontend/src/components/common/WalkthroughForm/index.tsx
@@ -140,7 +140,7 @@ Example text.`,
         status?.final && status?.success ? (
           <div className="FormFieldSuccess">{status.success}</div>
         ) : (
-          <Form className="Form">
+          <Form>
             <FormGrid>
               <FormGridFieldSet>
                 <TextAreaFormField label="Text" name="text" rich={true} />
diff --git a/frontend/src/components/common/WalkthroughStats/index.css b/frontend/src/components/common/WalkthroughStats/index.module.css
similarity index 69%
rename from frontend/src/components/common/WalkthroughStats/index.css
rename to frontend/src/components/common/WalkthroughStats/index.module.css
index f8328883..31763c4c 100644
--- a/frontend/src/components/common/WalkthroughStats/index.css
+++ b/frontend/src/components/common/WalkthroughStats/index.module.css
@@ -1,42 +1,44 @@
-.WalkthroughStats {
+.wrapper {
   margin-top: 1rem;
 }
 
-.WalkthroughStats--list {
+.list {
   display: flex;
   margin: 0.25rem 0;
   padding: 0;
 }
 
-.WalkthroughStats--listItem {
+.listItem {
   display: block;
 }
 
-.WalkthroughStats--indicator {
+.indicator {
   height: 22px;
   background: var(--link-color);
   mask-image: var(--bg-url);
   -webkit-mask-image: var(--bg-url);
 }
 
-.WalkthroughStats--indicator.video_only {
+.indicator.videoAndText {
+  --bg-url: unset;
+}
+
+.indicator.videoOnly {
   --bg-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect x='0' y='0' width='7' height='2'/></svg>");
 }
 
-.WalkthroughStats--indicator.text_only {
+.indicator.textOnly {
   --bg-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect x='0' y='0' width='1' height='7'/></svg>");
 }
 
-.WalkthroughStats--indicator.none {
+.indicator.none {
   --bg-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7'><rect x='3' y='0' width='1' height='1'/></svg>");
 }
 
-.WalkthroughStats--listItem:hover {
-}
-.WalkthroughStats--indicator:hover {
+.indicator:hover {
   filter: var(--walkthroughs-hover-filter);
 }
 
-.WalkthroughStats--footer {
+.footer {
   text-align: center;
 }
diff --git a/frontend/src/components/common/WalkthroughStats/index.tsx b/frontend/src/components/common/WalkthroughStats/index.tsx
index 59260bdc..60f75829 100644
--- a/frontend/src/components/common/WalkthroughStats/index.tsx
+++ b/frontend/src/components/common/WalkthroughStats/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useState } from "react";
 import { useContext } from "react";
 import { ConfigContext } from "src/contexts/ConfigContext";
@@ -12,22 +12,22 @@ const WalkthroughStats = () => {
   const stats = [
     {
       title: "Video and text",
-      className: "video_and_text",
+      className: styles.videoAndText,
       count: config.walkthrough_stats.video_and_text,
     },
     {
       title: "Video only",
-      className: "video_only",
+      className: styles.videoOnly,
       count: config.walkthrough_stats.video,
     },
     {
       title: "Text only",
-      className: "text_only",
+      className: styles.textOnly,
       count: config.walkthrough_stats.text,
     },
     {
       title: "Missing",
-      className: "none",
+      className: styles.none,
       count: config.walkthrough_stats.none,
     },
   ];
@@ -62,12 +62,12 @@ const WalkthroughStats = () => {
   );
 
   return (
-    <div className="WalkthroughStats">
-      <ul className="WalkthroughStats--list">
+    <div className={styles.wrapper}>
+      <ul className={styles.list}>
         {stats.map((item) => (
           <li
             key={item.title}
-            className="WalkthroughStats--listItem"
+            className={styles.listItem}
             onMouseEnter={() => handleMouseEnter(item)}
             onMouseLeave={() => handleMouseLeave(item)}
             style={{
@@ -76,14 +76,12 @@ const WalkthroughStats = () => {
           >
             <div
               title={item.title}
-              className={`WalkthroughStats--indicator ${item.className}`}
+              className={`${styles.indicator} ${item.className}`}
             ></div>
           </li>
         ))}
       </ul>
-      <footer className="WalkthroughStats--footer">
-        {tooltip || defaultTooltip}
-      </footer>
+      <footer className={styles.footer}>{tooltip || defaultTooltip}</footer>
     </div>
   );
 };
diff --git a/frontend/src/components/common/WalkthroughsTable/index.tsx b/frontend/src/components/common/WalkthroughsTable/index.tsx
index 1b9eba7f..e475e440 100644
--- a/frontend/src/components/common/WalkthroughsTable/index.tsx
+++ b/frontend/src/components/common/WalkthroughsTable/index.tsx
@@ -109,7 +109,6 @@ const WalkthroughsTable = ({
 
   return (
     <DataTable
-      className="WalkthroughsTable"
       queryName="walkthroughs"
       columns={columns}
       itemKey={itemKey}
diff --git a/frontend/src/components/formfields/GenresFormField/index.css b/frontend/src/components/formfields/GenresFormField/index.css
deleted file mode 100644
index 799e4c44..00000000
--- a/frontend/src/components/formfields/GenresFormField/index.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.GenresFormField {
-  columns: 2;
-  display: inline-block;
-  padding: 0.5rem;
-  background: var(--label-bg-color);
-  border: 2px solid var(--input-border-color);
-}
-.GenresFormField .Icon {
-  color: var(--input-border-color);
-  margin-left: 1rem;
-  float: right;
-}
-.GenresFormField--label {
-  width: 100%;
-}
-.GenresFormField--labelText {
-  flex-grow: 1;
-}
-
-.GenresFormField--label .Checkbox {
-  display: inline;
-}
diff --git a/frontend/src/components/formfields/GenresFormField/index.module.css b/frontend/src/components/formfields/GenresFormField/index.module.css
new file mode 100644
index 00000000..74f29691
--- /dev/null
+++ b/frontend/src/components/formfields/GenresFormField/index.module.css
@@ -0,0 +1,18 @@
+.wrapper {
+  columns: 2;
+  display: inline-block;
+  padding: 0.5rem;
+  background: var(--label-bg-color);
+  border: 2px solid var(--input-border-color);
+}
+
+.label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.icon {
+  color: var(--input-border-color);
+}
diff --git a/frontend/src/components/formfields/GenresFormField/index.tsx b/frontend/src/components/formfields/GenresFormField/index.tsx
index ded3d2f5..a5a211d9 100644
--- a/frontend/src/components/formfields/GenresFormField/index.tsx
+++ b/frontend/src/components/formfields/GenresFormField/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useFormikContext } from "formik";
 import { useContext } from "react";
 import { Checkbox } from "src/components/common/Checkbox";
@@ -41,10 +41,10 @@ const GenresFormField = ({
 
   return (
     <BaseFormField name={name} readonly={readonly} {...props}>
-      <div className="GenresFormField">
+      <div className={styles.wrapper}>
         {Object.values(genreMap).map((genre) => (
           <div key={genre.id}>
-            <label className="GenresFormField--label">
+            <label className={styles.label}>
               <Checkbox
                 label={genre.name}
                 disabled={readonly}
@@ -53,7 +53,7 @@ const GenresFormField = ({
                 }
                 checked={value.map((g) => g.id).includes(genre.id)}
               />
-              <span title={genre.description}>
+              <span className={styles.icon} title={genre.description}>
                 <IconInformationCircle />
               </span>
             </label>
diff --git a/frontend/src/components/formfields/TextAreaFormField/index.css b/frontend/src/components/formfields/TextAreaFormField/index.css
deleted file mode 100644
index 1cbbadf5..00000000
--- a/frontend/src/components/formfields/TextAreaFormField/index.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.TextAreaFormField {
-  --textarea-height: 32rem;
-}
-
-.TextAreaFormField .MarkdownComposer {
-  flex: 1;
-}
-
-.TextAreaFormField--preview {
-  flex-grow: 1;
-}
-
-.TextAreaFormField--previewHeader {
-  padding: 0.5rem;
-  background: var(--box-bg-color);
-  border-bottom: 2px solid var(--input-border-color);
-}
-
-.TextAreaFormField--previewBody {
-  background: var(--box-bg-color);
-  padding: 0.5rem;
-}
-
-.TextAreaFormField.tabbed .TabSwitch--content {
-  width: 100%;
-  display: inline-block;
-  overflow-y: auto;
-}
-
-.TextAreaFormField.tabbed .TabSwitch--contentItem.active {
-  width: 100%;
-  height: var(--textarea-height);
-  overflow-y: auto;
-  display: flex;
-}
-
-.TextAreaFormField.tabbed .TextAreaFormField--previewHeader {
-  display: none;
-}
-
-.TextAreaFormField.plain .TextArea--input {
-  min-height: 12rem;
-  min-width: 24rem;
-}
-
-.TextAreaFormField.sideBySide {
-  display: flex;
-  height: var(--textarea-height);
-}
-
-.TextAreaFormField.sideBySide .MarkdownComposer {
-  border-right: 0;
-}
-
-.TextAreaFormField.sideBySide .TextAreaFormField--preview {
-  border: 2px solid var(--input-border-color);
-  border-left: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.TextAreaFormField.sideBySide .TextAreaFormField--previewBody {
-  flex: 1 1 auto;
-  border-left: 2px solid var(--input-border-color);
-  overflow: auto;
-}
diff --git a/frontend/src/components/formfields/TextAreaFormField/index.module.css b/frontend/src/components/formfields/TextAreaFormField/index.module.css
new file mode 100644
index 00000000..a755f822
--- /dev/null
+++ b/frontend/src/components/formfields/TextAreaFormField/index.module.css
@@ -0,0 +1,59 @@
+.wrapper {
+  --textarea-height: 32rem;
+}
+
+.wrapper :global .MarkdownComposer {
+  flex: 1;
+}
+
+.preview {
+  flex-grow: 1;
+}
+
+.previewHeader {
+  padding: 0.5rem;
+  background: var(--box-bg-color);
+  border-bottom: 2px solid var(--input-border-color);
+}
+
+.previewBody {
+  background: var(--box-bg-color);
+  padding: 0.5rem;
+  height: var(--textarea-height);
+  box-sizing: border-box;
+}
+
+.wrapper.tabbed {
+  --min-tab-height: var(--textarea-height);
+}
+
+.wrapper.tabbed .previewHeader {
+  display: none;
+}
+
+.wrapper.plain :global .TextArea--input {
+  min-height: 12rem;
+  min-width: 24rem;
+}
+
+.wrapper.sideBySide {
+  display: flex;
+  height: var(--textarea-height);
+}
+
+.wrapper.sideBySide :global .MarkdownComposer {
+  border-right: 0;
+}
+
+.wrapper.sideBySide .preview {
+  border: 2px solid var(--input-border-color);
+  border-left: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.wrapper.sideBySide .previewBody {
+  flex: 1 1 auto;
+  border-left: 2px solid var(--input-border-color);
+  overflow: auto;
+}
diff --git a/frontend/src/components/formfields/TextAreaFormField/index.tsx b/frontend/src/components/formfields/TextAreaFormField/index.tsx
index b9a2680e..335a8edc 100644
--- a/frontend/src/components/formfields/TextAreaFormField/index.tsx
+++ b/frontend/src/components/formfields/TextAreaFormField/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useFormikContext } from "formik";
 import { Field } from "formik";
 import { TabSwitch } from "src/components/common/TabSwitch";
@@ -25,7 +25,7 @@ const TextAreaFormFieldTabbed = ({
   const { values } = useFormikContext();
   return (
     <BaseFormField name={name} readonly={readonly} {...props}>
-      <div className="TextAreaFormField tabbed">
+      <div className={`${styles.wrapper} ${styles.tabbed}`}>
         <TabSwitch
           tabs={[
             {
@@ -43,11 +43,9 @@ const TextAreaFormFieldTabbed = ({
             {
               label: "Preview",
               content: (
-                <div className="TextAreaFormField--preview">
-                  <div className="TextAreaFormField--previewHeader">
-                    Preview
-                  </div>
-                  <div className="TextAreaFormField--previewBody">
+                <div className={styles.header}>
+                  <div className={styles.previewHeader}>Preview</div>
+                  <div className={styles.previewBody}>
                     <Markdown>{(values as any)[name]}</Markdown>
                   </div>
                 </div>
@@ -70,7 +68,7 @@ const TextAreaFormFieldSide = ({
   const { values } = useFormikContext();
   return (
     <BaseFormField name={name} readonly={readonly} {...props}>
-      <div className="TextAreaFormField sideBySide">
+      <div className={`${styles.wrapper} ${styles.sideBySide}`}>
         <Field
           name={name}
           validate={validate}
@@ -78,9 +76,9 @@ const TextAreaFormFieldSide = ({
           allowAttachments={allowAttachments}
           component={MarkdownComposer}
         />
-        <div className="TextAreaFormField--preview">
-          <div className="TextAreaFormField--previewHeader">Preview</div>
-          <div className="TextAreaFormField--previewBody">
+        <div className={styles.preview}>
+          <div className={styles.previewHeader}>Preview</div>
+          <div className={styles.previewBody}>
             <Markdown>{(values as any)[name]}</Markdown>
           </div>
         </div>
@@ -98,7 +96,7 @@ const TextAreaFormFieldPlain = ({
 }: TextAreaFormFieldProps) => {
   return (
     <BaseFormField name={name} readonly={readonly} {...props}>
-      <div className="TextAreaFormField plain">
+      <div className={`${styles.wrapper} ${styles.plain}`}>
         <Field
           name={name}
           validate={validate}
diff --git a/frontend/src/components/layouts/SidebarLayout/index.module.css b/frontend/src/components/layouts/SidebarLayout/index.module.css
index c7d5b911..e370cabf 100644
--- a/frontend/src/components/layouts/SidebarLayout/index.module.css
+++ b/frontend/src/components/layouts/SidebarLayout/index.module.css
@@ -1,9 +1,9 @@
 .wrapper {
   display: grid;
-  gap: 1rem 1.5rem;
+  gap: var(--layout-gap, 1rem 1.5rem);
 }
 .wrapper.regular {
-  grid-template-columns: minmax(300px, 25%) 1fr;
+  grid-template-columns: var(--layout-split, minmax(300px, 25%) 1fr);
 }
 .wrapper.reverse {
   grid-template-columns: 1fr minmax(300px, 25%);
@@ -25,7 +25,7 @@
 
 @media (max-device-width: 640px) {
   .wrapper {
-    grid-template-columns: 1fr !important;
+    grid-template-columns: var(--layout-split, 1fr) !important;
   }
   .header {
     grid-column: 1 !important;
diff --git a/frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.css b/frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.module.css
similarity index 50%
rename from frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.css
rename to frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.module.css
index b0b98e79..c6f27002 100644
--- a/frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.css
+++ b/frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.module.css
@@ -1,4 +1,4 @@
-.MarkdownAttachmentStrip {
+.wrapper {
   background: var(--input-bg-color);
   color: var(--input-fg-color);
   font-size: calc(var(--font-size) * 0.9);
@@ -7,26 +7,24 @@
   position: relative;
 }
 
-.MarkdownAttachmentStrip .FileUploader--dropArea {
+.wrapper :global .FileUploader--dropArea {
   padding: 0.25rem 0.5rem;
   display: block;
   cursor: pointer;
 }
 
-.MarkdownAttachmentStrip
-  .FileUploader--input:disabled
-  + .FileUploader--dropArea {
+.wrapper :global .FileUploader--input:disabled + .FileUploader--dropArea {
   cursor: default;
   opacity: 0.5;
 }
 
-.MarkdownAttachmentStrip .FileUploader--input:active + .FileUploader--dropArea,
-.MarkdownAttachmentStrip .FileUploader--input:focus + .FileUploader--dropArea,
-.MarkdownAttachmentStrip .FileUploader--dropArea.active {
-  background: var(--bg-color);
+.wrapper :global .FileUploader--input:active + .FileUploader--dropArea,
+.wrapper :global .FileUploader--input:focus + .FileUploader--dropArea,
+.wrapper :global .FileUploader--dropArea.active {
+  background: var(--input-bg-color);
 }
 
-.MarkdownAttachmentStrip--progressIndicator {
+.progressIndicator {
   position: absolute;
   z-index: 50;
   left: 0;
@@ -35,7 +33,7 @@
   background: var(--label-bg-color);
 }
 
-.MarkdownAttachmentStrip--label {
+.label {
   position: relative;
   z-index: 60;
 }
diff --git a/frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.tsx b/frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.tsx
index db8ea8cf..0577f2ec 100644
--- a/frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.tsx
+++ b/frontend/src/components/markdown-composer/MarkdownAttachmentStrip/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useState } from "react";
 import { FileUploader } from "src/components/common/FileUploader";
 import { applyStyle } from "src/components/markdown-composer/MarkdownStyle";
@@ -47,7 +47,7 @@ const MarkdownAttachmentStrip = ({
   };
 
   return (
-    <div className="MarkdownAttachmentStrip">
+    <div className={styles.wrapper}>
       <FileUploader
         allowMultiple={false}
         disableProgressbar={true}
@@ -59,10 +59,10 @@ const MarkdownAttachmentStrip = ({
           percentCompleted ? (
             <>
               <span
-                className="MarkdownAttachmentStrip--progressIndicator"
+                className={styles.progressIndicator}
                 style={{ width: `${percentCompleted}%` }}
               />
-              <span className="MarkdownAttachmentStrip--label">
+              <span className={styles.label}>
                 Uploading…{" "}
                 {`${Math.round(percentCompleted * 100) / 100}% complete`}
               </span>
diff --git a/frontend/src/components/markdown/Markdown/index.css b/frontend/src/components/markdown/Markdown/index.module.css
similarity index 53%
rename from frontend/src/components/markdown/Markdown/index.css
rename to frontend/src/components/markdown/Markdown/index.module.css
index 6c39d85e..90763d69 100644
--- a/frontend/src/components/markdown/Markdown/index.css
+++ b/frontend/src/components/markdown/Markdown/index.module.css
@@ -1,51 +1,51 @@
-.Markdown--Embed--YouTube {
+.embedYoutube {
   width: 640px;
   height: 480px;
   border: 0;
 }
 
-.Markdown {
+.wrapper {
   word-break: break-word;
 }
 
-.Markdown img {
+.wrapper :global img {
   max-width: 100%;
 }
 
-.Markdown table {
+.wrapper :global table {
   border-collapse: collapse;
 }
 
-.Markdown table td,
-.Markdown table th {
+.wrapper :global table td,
+.wrapper :global table th {
   padding: 0.25rem 1rem;
 }
 
-.Markdown table td:first-child,
-.Markdown table th:first-child {
+.wrapper :global table td:first-child,
+.wrapper :global table th:first-child {
   padding-left: 0;
 }
 
-.Markdown table thead th {
+.wrapper :global table thead th {
   border-bottom: 1px solid var(--fg-color);
 }
 
-.Markdown--color.pickup {
+.color.pickup {
   color: var(--fg-color-pickup);
 }
-.Markdown--color.trap {
+.color.trap {
   color: var(--fg-color-trap);
 }
-.Markdown--color.enemy {
+.color.enemy {
   color: var(--fg-color-enemy);
 }
-.Markdown--color.secret {
+.color.secret {
   color: var(--fg-color-secret);
 }
-.Markdown--color.object {
+.color.object {
   color: var(--fg-color-object);
 }
 
-.Markdown--alignment.center {
+.center {
   text-align: center;
 }
diff --git a/frontend/src/components/markdown/Markdown/index.tsx b/frontend/src/components/markdown/Markdown/index.tsx
index 34e647c5..7a518d34 100644
--- a/frontend/src/components/markdown/Markdown/index.tsx
+++ b/frontend/src/components/markdown/Markdown/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { findAndReplace } from "mdast-util-find-and-replace";
 import { toHast } from "mdast-util-to-hast";
 import { useMemo } from "react";
@@ -38,7 +38,7 @@ const remarkAlignment = () => {
         type: "alignment",
         data: {
           hName: "div",
-          hProperties: { class: "Markdown--alignment center" },
+          hProperties: { class: styles.center },
           hChildren: [{ type: "text", value: match.groups.content }],
         },
       },
@@ -88,7 +88,7 @@ const remarkAlignment = () => {
         value: "",
         data: {
           hName: "div",
-          hProperties: { class: "Markdown--alignment center" },
+          hProperties: { class: styles.center },
           hChildren: contentHast,
         },
       },
@@ -101,7 +101,7 @@ const remarkAlignment = () => {
         value: "",
         data: {
           hName: "p",
-          hProperties: { class: "Markdown--alignment center" },
+          hProperties: { class: styles.center },
           hChildren: newContent.map(toHast),
         },
       });
@@ -130,17 +130,17 @@ const remarkTRCustomColors = () => {
   const coloredTextRegex = /\[([pesto])\]([^\n[\]]*)\[\/\1\]/gi;
   const replaceColoredText = ($0: string, char: string, text: string): any => {
     let className = {
-      p: "pickup",
-      e: "enemy",
-      s: "secret",
-      t: "trap",
-      o: "object",
+      p: styles.pickup,
+      e: styles.enemy,
+      s: styles.secret,
+      t: styles.trap,
+      o: styles.object,
     }[char];
     return {
       type: "element",
       data: {
         hName: "span",
-        hProperties: { class: `Markdown--color ${className}` },
+        hProperties: { class: `${styles.color} ${className}` },
         hChildren: [{ type: "text", value: text }],
       },
     };
@@ -157,7 +157,7 @@ const transformLink = (link: any): any => {
     return (
       <iframe
         title="YouTube video"
-        className="Markdown--Embed--YouTube"
+        className={styles.embedYoutube}
         src={`https://www.youtube.com/embed/${youtubeVideo.videoID}?autoplay=0&iv_load_policy=3&showinfo=0&rel=0&start=0&end=0&list=${youtubeVideo.playlistID}`}
       />
     );
@@ -166,7 +166,7 @@ const transformLink = (link: any): any => {
     return (
       <iframe
         title="YouTube video"
-        className="Markdown--Embed--YouTube"
+        className={styles.embedYoutube}
         src={`https://www.youtube.com/embed/${youtubeVideo.videoID}?autoplay=0&iv_load_policy=3&showinfo=0&rel=0&start=0&end=0`}
       />
     );
@@ -181,7 +181,7 @@ interface MarkdownProps {
 const Markdown = ({ children }: MarkdownProps) => {
   const rendered = useMemo(
     () => (
-      <div className="Markdown ChildMarginClear">
+      <div className={`${styles.wrapper} ChildMarginClear`}>
         <ReactMarkdown
           remarkPlugins={[
             remarkGfm,
diff --git a/frontend/src/components/pages/AboutPage/index.tsx b/frontend/src/components/pages/AboutPage/index.tsx
index afcaab60..7b3610bf 100644
--- a/frontend/src/components/pages/AboutPage/index.tsx
+++ b/frontend/src/components/pages/AboutPage/index.tsx
@@ -112,7 +112,7 @@ const AboutPage = () => {
 
   return (
     <PlainLayout>
-      <NestedLegalese entry={About} />
+      <NestedLegalese prefix="about" entry={About} />
     </PlainLayout>
   );
 };
diff --git a/frontend/src/components/pages/GenreListPage/index.tsx b/frontend/src/components/pages/GenreListPage/index.tsx
index 42174588..6fa014eb 100644
--- a/frontend/src/components/pages/GenreListPage/index.tsx
+++ b/frontend/src/components/pages/GenreListPage/index.tsx
@@ -52,12 +52,10 @@ const GenreListPage = () => {
         onSearchQueryChange={setSearchQuery}
       />
 
-      <div className="GenreListPage--results">
-        <GenresTable
-          searchQuery={searchQuery}
-          onSearchQueryChange={setSearchQuery}
-        />
-      </div>
+      <GenresTable
+        searchQuery={searchQuery}
+        onSearchQueryChange={setSearchQuery}
+      />
     </PlainLayout>
   );
 };
diff --git a/frontend/src/components/pages/HomePage/FeaturedLevels/index.module.css b/frontend/src/components/pages/HomePage/FeaturedLevels/index.module.css
index cca844de..d06abf3a 100644
--- a/frontend/src/components/pages/HomePage/FeaturedLevels/index.module.css
+++ b/frontend/src/components/pages/HomePage/FeaturedLevels/index.module.css
@@ -44,10 +44,6 @@
   gap: 1rem;
 }
 
-.header {
-  margin-top: 0;
-}
-
 .levelTitle {
   margin: 0 0 0.5rem 0;
 }
diff --git a/frontend/src/components/pages/HomePage/FeaturedLevels/index.tsx b/frontend/src/components/pages/HomePage/FeaturedLevels/index.tsx
index ef0eee51..66a105e9 100644
--- a/frontend/src/components/pages/HomePage/FeaturedLevels/index.tsx
+++ b/frontend/src/components/pages/HomePage/FeaturedLevels/index.tsx
@@ -48,7 +48,7 @@ const FeaturedLevelView = ({
         style={background ? { backgroundImage: `url('${background}')` } : {}}
       />
       <div className={styles.foreground}>
-        <SectionHeader className={styles.header}>{heading}</SectionHeader>
+        <SectionHeader>{heading}</SectionHeader>
 
         <div className={styles.details}>
           {!!level?.cover && (
@@ -99,7 +99,7 @@ const FeaturedLevelsView = () => {
   }
 
   return (
-    <div className="FeaturedLevelsView">
+    <div>
       {Object.values(FeatureType).map((featureType) => (
         <FeaturedLevelView
           key={featureType}
diff --git a/frontend/src/components/pages/HomePage/StatsSidebar/index.tsx b/frontend/src/components/pages/HomePage/StatsSidebar/index.tsx
index 77a9e79d..54942101 100644
--- a/frontend/src/components/pages/HomePage/StatsSidebar/index.tsx
+++ b/frontend/src/components/pages/HomePage/StatsSidebar/index.tsx
@@ -14,10 +14,12 @@ import { LevelStats } from "src/components/pages/HomePage/LevelStats";
 const StatsSidebar = () => {
   return (
     <SidebarBox>
-      <SectionHeader>Statistics</SectionHeader>
-      <LevelStats />
-      <ReviewStats />
-      <WalkthroughStats />
+      <Section>
+        <SectionHeader>Statistics</SectionHeader>
+        <LevelStats />
+        <ReviewStats />
+        <WalkthroughStats />
+      </Section>
 
       <Section>
         <SectionHeader>External links</SectionHeader>
diff --git a/frontend/src/components/pages/LevelListPage/index.css b/frontend/src/components/pages/LevelListPage/index.css
deleted file mode 100644
index 70d0538d..00000000
--- a/frontend/src/components/pages/LevelListPage/index.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.LevelListPage {
-  display: grid;
-  grid-template-areas: "sidebar results";
-  grid-template-columns: min-content 6fr;
-  grid-template-rows: min-content 1fr;
-  gap: 1rem;
-  align-items: flex-start;
-}
-
-@media (max-device-width: 1280px) {
-  .LevelListPage {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "sidebar"
-      "results";
-  }
-}
-
-.LevelListPage--sidebar {
-  grid-area: sidebar;
-  white-space: nowrap;
-}
-
-.LevelListPage--sidebar p {
-  margin: 0.5rem 0 0.25rem 0;
-}
-
-.LevelListPage--sidebar .TextInput--input {
-  min-width: unset;
-  max-width: 10rem;
-  margin: 0 0 0.5rem 0;
-}
-
-.LevelListPage--results {
-  width: 100%;
-  grid-area: results;
-}
diff --git a/frontend/src/components/pages/LevelListPage/index.module.css b/frontend/src/components/pages/LevelListPage/index.module.css
new file mode 100644
index 00000000..13dfad2e
--- /dev/null
+++ b/frontend/src/components/pages/LevelListPage/index.module.css
@@ -0,0 +1,10 @@
+.wrapper {
+  --layout-gap: 1rem;
+  --layout-split: min-content 6fr;
+}
+
+@media (max-device-width: 800px) {
+  .wrapper {
+    --layout-split: 1fr;
+  }
+}
diff --git a/frontend/src/components/pages/LevelListPage/index.tsx b/frontend/src/components/pages/LevelListPage/index.tsx
index 5fe9f2ee..09779b8f 100644
--- a/frontend/src/components/pages/LevelListPage/index.tsx
+++ b/frontend/src/components/pages/LevelListPage/index.tsx
@@ -1,10 +1,11 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useState } from "react";
 import { LevelList } from "src/components/common/LevelList";
 import { LevelSearchSidebar } from "src/components/common/LevelSearchSidebar";
 import { QueryPersister } from "src/components/common/QueryPersister";
 import { deserializeGenericSearchQuery } from "src/components/common/QueryPersister";
 import { serializeGenericSearchQuery } from "src/components/common/QueryPersister";
+import { SidebarLayout } from "src/components/layouts/SidebarLayout";
 import { usePageMetadata } from "src/contexts/PageMetadataContext";
 import type { LevelSearchQuery } from "src/services/LevelService";
 import { filterFalsyObjectValues } from "src/utils/misc";
@@ -80,28 +81,29 @@ const LevelListPage = () => {
     []
   );
 
+  const sidebar = (
+    <LevelSearchSidebar
+      defaultSearchQuery={defaultSearchQuery}
+      searchQuery={searchQuery}
+      onSearchQueryChange={setSearchQuery}
+    />
+  );
+
   return (
-    <div className="LevelListPage">
-      <QueryPersister
-        serializeSearchQuery={serializeSearchQuery}
-        deserializeSearchQuery={deserializeSearchQuery}
-        searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
-      />
-      <div className="LevelListPage--sidebar">
-        <LevelSearchSidebar
-          defaultSearchQuery={defaultSearchQuery}
+    <div className={styles.wrapper}>
+      <SidebarLayout sidebar={sidebar}>
+        <QueryPersister
+          serializeSearchQuery={serializeSearchQuery}
+          deserializeSearchQuery={deserializeSearchQuery}
           searchQuery={searchQuery}
-          onSearchQueryChange={setSearchQuery}
+          setSearchQuery={setSearchQuery}
         />
-      </div>
 
-      <div className="LevelListPage--results">
         <LevelList
           searchQuery={searchQuery}
           onSearchQueryChange={setSearchQuery}
         />
-      </div>
+      </SidebarLayout>
     </div>
   );
 };
diff --git a/frontend/src/components/pages/ModerationPage/index.css b/frontend/src/components/pages/ModerationPage/index.css
deleted file mode 100644
index 39449847..00000000
--- a/frontend/src/components/pages/ModerationPage/index.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.ModerationPage {
-  display: grid;
-  grid-template-areas: "sidebar results";
-  grid-template-columns: min-content 6fr;
-  grid-template-rows: min-content 1fr;
-  gap: 1rem;
-  align-items: flex-start;
-}
-
-@media (max-device-width: 1280px) {
-  .ModerationPage {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "sidebar"
-      "results";
-  }
-}
-
-.ModerationPage--sidebar {
-  grid-area: sidebar;
-  white-space: nowrap;
-}
-
-.ModerationPage--results {
-  width: 100%;
-  grid-area: results;
-}
diff --git a/frontend/src/components/pages/ModerationPage/index.tsx b/frontend/src/components/pages/ModerationPage/index.tsx
index d7ab9812..683f1930 100644
--- a/frontend/src/components/pages/ModerationPage/index.tsx
+++ b/frontend/src/components/pages/ModerationPage/index.tsx
@@ -1,4 +1,3 @@
-import "./index.css";
 import { useState } from "react";
 import { AuditLogSearch } from "src/components/common/AuditLogSearch";
 import { AuditLogTable } from "src/components/common/AuditLogTable";
diff --git a/frontend/src/components/pages/ReviewAuthorsPage/index.tsx b/frontend/src/components/pages/ReviewAuthorsPage/index.tsx
index 01985055..ce97b012 100644
--- a/frontend/src/components/pages/ReviewAuthorsPage/index.tsx
+++ b/frontend/src/components/pages/ReviewAuthorsPage/index.tsx
@@ -62,7 +62,7 @@ const ReviewAuthorsPage = () => {
         setSearchQuery={setSearchQuery}
       />
 
-      <Section className="ChildMarginClear">
+      <Section>
         <SectionHeader>Reviewer catalogue</SectionHeader>
 
         <UserSearch
diff --git a/frontend/src/components/pages/ReviewLevelSuggestionsPage/index.tsx b/frontend/src/components/pages/ReviewLevelSuggestionsPage/index.tsx
index 3ebdd16e..2db62888 100644
--- a/frontend/src/components/pages/ReviewLevelSuggestionsPage/index.tsx
+++ b/frontend/src/components/pages/ReviewLevelSuggestionsPage/index.tsx
@@ -67,7 +67,7 @@ const ReviewLevelSuggestionsPage = () => {
         setSearchQuery={setSearchQuery}
       />
 
-      <Section className="ChildMarginClear">
+      <Section>
         <SectionHeader>Less known levels</SectionHeader>
 
         <InfoMessage type={InfoMessageType.Info}>
diff --git a/frontend/src/components/pages/ReviewListPage/index.tsx b/frontend/src/components/pages/ReviewListPage/index.tsx
index a6d93e6a..d82a408f 100644
--- a/frontend/src/components/pages/ReviewListPage/index.tsx
+++ b/frontend/src/components/pages/ReviewListPage/index.tsx
@@ -54,7 +54,7 @@ const ReviewListPage = () => {
         setSearchQuery={setSearchQuery}
       />
 
-      <Section className="ChildMarginClear">
+      <Section>
         <SectionHeader>Latest reviews</SectionHeader>
 
         <ReviewsList
diff --git a/frontend/src/components/pages/TagListPage/index.tsx b/frontend/src/components/pages/TagListPage/index.tsx
index b3af8500..490c3971 100644
--- a/frontend/src/components/pages/TagListPage/index.tsx
+++ b/frontend/src/components/pages/TagListPage/index.tsx
@@ -53,12 +53,10 @@ const TagListPage = () => {
         onSearchQueryChange={setSearchQuery}
       />
 
-      <div className="TagListPage--results">
-        <TagsTable
-          searchQuery={searchQuery}
-          onSearchQueryChange={setSearchQuery}
-        />
-      </div>
+      <TagsTable
+        searchQuery={searchQuery}
+        onSearchQueryChange={setSearchQuery}
+      />
     </PlainLayout>
   );
 };
diff --git a/frontend/src/components/pages/TermsAndConditionsPage/index.tsx b/frontend/src/components/pages/TermsAndConditionsPage/index.tsx
index b682eeed..7a7979dc 100644
--- a/frontend/src/components/pages/TermsAndConditionsPage/index.tsx
+++ b/frontend/src/components/pages/TermsAndConditionsPage/index.tsx
@@ -225,7 +225,7 @@ const TermsAndConditionsPage = () => {
 
   return (
     <PlainLayout>
-      <NestedLegalese title="Terms and Conditions" entry={TOS} />
+      <NestedLegalese prefix="tos" title="Terms and Conditions" entry={TOS} />
     </PlainLayout>
   );
 };
diff --git a/frontend/src/components/pages/TrophiesPage/index.tsx b/frontend/src/components/pages/TrophiesPage/index.tsx
index bcf2f225..bbf63337 100644
--- a/frontend/src/components/pages/TrophiesPage/index.tsx
+++ b/frontend/src/components/pages/TrophiesPage/index.tsx
@@ -80,6 +80,7 @@ const TrophiesPage = () => {
   return (
     <PlainLayout header="Item collection guide">
       <Section>
+        <SectionHeader>Introduction</SectionHeader>
         <p>
           By accomplishing various feats and proving your worth, you may find
           yourself eligible to obtain a rare prized item that goes into your
diff --git a/frontend/src/components/pages/UserWalkthroughsPage/index.tsx b/frontend/src/components/pages/UserWalkthroughsPage/index.tsx
index 0ffdd83d..b55a4e3d 100644
--- a/frontend/src/components/pages/UserWalkthroughsPage/index.tsx
+++ b/frontend/src/components/pages/UserWalkthroughsPage/index.tsx
@@ -36,7 +36,7 @@ const UserWalkthroughsPageView = ({
   }, [user.id, isLoggedIn]);
 
   return (
-    <Section className="ChildMarginClear">
+    <Section>
       <SectionHeader>Walkthroughs</SectionHeader>
       <WalkthroughsTable
         showLevelNames={true}
diff --git a/frontend/src/components/pages/WalkthroughEditPage/index.css b/frontend/src/components/pages/WalkthroughEditPage/index.css
deleted file mode 100644
index 03646d38..00000000
--- a/frontend/src/components/pages/WalkthroughEditPage/index.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.WalkthroughEditPage .TextAreaFormField {
-  --textarea-height: 75vh;
-}
diff --git a/frontend/src/components/pages/WalkthroughEditPage/index.module.css b/frontend/src/components/pages/WalkthroughEditPage/index.module.css
new file mode 100644
index 00000000..d3b04b4c
--- /dev/null
+++ b/frontend/src/components/pages/WalkthroughEditPage/index.module.css
@@ -0,0 +1,3 @@
+.wrapper :global .TextAreaFormField {
+  --textarea-height: 75vh;
+}
diff --git a/frontend/src/components/pages/WalkthroughEditPage/index.tsx b/frontend/src/components/pages/WalkthroughEditPage/index.tsx
index 7a7749f2..5be76d19 100644
--- a/frontend/src/components/pages/WalkthroughEditPage/index.tsx
+++ b/frontend/src/components/pages/WalkthroughEditPage/index.tsx
@@ -1,8 +1,9 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useQuery } from "react-query";
 import { useParams } from "react-router-dom";
 import { Loader } from "src/components/common/Loader";
 import { PageGuard } from "src/components/common/PermissionGuard";
+import { SmartWrap } from "src/components/common/SmartWrap";
 import { WalkthroughForm } from "src/components/common/WalkthroughForm";
 import { PlainLayout } from "src/components/layouts/PlainLayout";
 import { LevelLink } from "src/components/links/LevelLink";
@@ -65,6 +66,18 @@ const WalkthroughEditPage = () => {
     return <p>Invalid action.</p>;
   }
 
+  const actualLevel = level || walkthrough?.level;
+  const header = actualLevel ? (
+    <>
+      Walkthrough for{" "}
+      <LevelLink level={actualLevel}>
+        <SmartWrap text={actualLevel.name} />
+      </LevelLink>
+    </>
+  ) : (
+    <>Walkthrough</>
+  );
+
   return (
     <PageGuard
       require={
@@ -74,25 +87,13 @@ const WalkthroughEditPage = () => {
       }
       owningUserIds={walkthrough?.author ? [walkthrough.author.id] : []}
     >
-      <PlainLayout>
-        {level ? (
-          <h1>
-            {" "}
-            Walkthrough for <LevelLink level={level} />
-          </h1>
-        ) : walkthrough?.level ? (
-          <h1>
-            {" "}
-            Walkthrough for <LevelLink level={walkthrough.level} />
-          </h1>
-        ) : (
-          <h1>Walkthrough</h1>
-        )}
-
-        <WalkthroughForm
-          walkthrough={walkthrough || undefined}
-          level={level || walkthrough?.level}
-        />
+      <PlainLayout header={header}>
+        <div className={styles.wrapper}>
+          <WalkthroughForm
+            walkthrough={walkthrough || undefined}
+            level={level || walkthrough?.level}
+          />
+        </div>
       </PlainLayout>
     </PageGuard>
   );