diff --git a/.gitignore b/.gitignore
index b2d6de30..d64d0f4b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea/
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 5eea091d..f924256c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -112,14 +112,15 @@ Site content is licensed <a href='http://creativecommons.org/licenses/by-nd/4.0/
         theme: {
           customCss: [
             require.resolve('@fontsource/noto-sans/index.css'),
-            require.resolve('./src/css/custom.css'),
-            require.resolve('./src/css/swiper.css')
+            require.resolve('./src/css/custom.scss'),
+            require.resolve('./src/css/swiper.scss')
           ]
         }
       }
     ]
   ],
   plugins: [
+    'docusaurus-plugin-sass',
     [
       '@docusaurus/plugin-client-redirects',
       {
diff --git a/package-lock.json b/package-lock.json
index 2ef67229..1ded1865 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,9 +20,11 @@
         "@mdx-js/react": "1.6.22",
         "@svgr/webpack": "6.4.0",
         "clsx": "1.2.1",
+        "docusaurus-plugin-sass": "0.2.2",
         "file-loader": "6.2.0",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "sass": "1.55.0",
         "swiper": "8.4.3",
         "url-loader": "4.1.1"
       },
@@ -6203,6 +6205,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/docusaurus-plugin-sass": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.2.tgz",
+      "integrity": "sha512-ZZBpj3PrhGpYE2kAnkZB9NRwy/CDi4rGun1oec6PYR8YvGzqxYGtXvLgHi6FFbu8/N483klk8udqyYMh6Ted+A==",
+      "dependencies": {
+        "sass-loader": "^10.1.1"
+      },
+      "peerDependencies": {
+        "@docusaurus/core": "^2.0.0-beta",
+        "sass": "^1.30.0"
+      }
+    },
     "node_modules/dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -8675,8 +8689,7 @@
     "node_modules/immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
-      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
-      "dev": true
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -12820,10 +12833,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.54.8",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz",
-      "integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==",
-      "dev": true,
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
+      "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -12836,6 +12848,59 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/sass-loader": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.3.1.tgz",
+      "integrity": "sha512-y2aBdtYkbqorVavkC3fcJIUDGIegzDWPn3/LAFhsf3G+MzPKTJx37sROf5pXtUeggSVbNbmfj8TgRaSLMelXRA==",
+      "dependencies": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
+        "sass": "^1.3.0",
+        "webpack": "^4.36.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sass-loader/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
diff --git a/package.json b/package.json
index 9ad019be..2a5b905d 100644
--- a/package.json
+++ b/package.json
@@ -34,9 +34,11 @@
     "@mdx-js/react": "1.6.22",
     "@svgr/webpack": "6.4.0",
     "clsx": "1.2.1",
+    "docusaurus-plugin-sass": "0.2.2",
     "file-loader": "6.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "sass": "1.55.0",
     "swiper": "8.4.3",
     "url-loader": "4.1.1"
   },
diff --git a/src/components/common/DetailsCard.css b/src/components/common/DetailsCard.scss
similarity index 100%
rename from src/components/common/DetailsCard.css
rename to src/components/common/DetailsCard.scss
diff --git a/src/components/common/DetailsCard.tsx b/src/components/common/DetailsCard.tsx
index c3ca624b..af11d3b3 100644
--- a/src/components/common/DetailsCard.tsx
+++ b/src/components/common/DetailsCard.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 
-import './DetailsCard.css';
+import './DetailsCard.scss';
 
 type DetailsCardProps = {
   id?: string;
diff --git a/src/components/common/Hero.css b/src/components/common/Hero.scss
similarity index 100%
rename from src/components/common/Hero.css
rename to src/components/common/Hero.scss
diff --git a/src/components/common/Hero.tsx b/src/components/common/Hero.tsx
index 8b707475..37f721a3 100644
--- a/src/components/common/Hero.tsx
+++ b/src/components/common/Hero.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { FunctionComponent, ReactNode } from 'react';
 
-import './Hero.css';
+import './Hero.scss';
 
 type HeroProps = {
   children?: ReactNode;
diff --git a/src/components/contact/ContactCard.css b/src/components/contact/ContactCard.scss
similarity index 100%
rename from src/components/contact/ContactCard.css
rename to src/components/contact/ContactCard.scss
diff --git a/src/components/contact/DiscordCard.tsx b/src/components/contact/DiscordCard.tsx
index 2abc7952..598695cd 100644
--- a/src/components/contact/DiscordCard.tsx
+++ b/src/components/contact/DiscordCard.tsx
@@ -1,7 +1,7 @@
 import { Discord } from '@icons-pack/react-simple-icons';
 import React from 'react';
 
-import './ContactCard.css';
+import './ContactCard.scss';
 
 const DiscordCard = () => (
   <div className='card card--contact'>
diff --git a/src/components/contact/FacebookCard.tsx b/src/components/contact/FacebookCard.tsx
index c803b6cc..00a7b8ec 100644
--- a/src/components/contact/FacebookCard.tsx
+++ b/src/components/contact/FacebookCard.tsx
@@ -1,7 +1,7 @@
 import { Facebook } from '@icons-pack/react-simple-icons';
 import React from 'react';
 
-import './ContactCard.css';
+import './ContactCard.scss';
 
 const FacebookCard = () => (
   <div className='card card--contact'>
diff --git a/src/components/contact/IrcCard.tsx b/src/components/contact/IrcCard.tsx
index 63816027..d4b8eb8c 100644
--- a/src/components/contact/IrcCard.tsx
+++ b/src/components/contact/IrcCard.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import './ContactCard.css';
+import './ContactCard.scss';
 
 const IrcCard = () => (
   <div className='card card--contact'>
diff --git a/src/components/contact/MatrixCard.tsx b/src/components/contact/MatrixCard.tsx
index 26ae7595..4e0da567 100644
--- a/src/components/contact/MatrixCard.tsx
+++ b/src/components/contact/MatrixCard.tsx
@@ -1,7 +1,7 @@
 import { Element } from '@icons-pack/react-simple-icons';
 import React, { useState } from 'react';
 
-import './ContactCard.css';
+import './ContactCard.scss';
 
 const MatrixCard = () => {
   const [isAllRoomsVisible, setAllRoomsVisible] = useState(false);
diff --git a/src/components/contact/RedditCard.tsx b/src/components/contact/RedditCard.tsx
index a00f8f08..b9d129c1 100644
--- a/src/components/contact/RedditCard.tsx
+++ b/src/components/contact/RedditCard.tsx
@@ -1,7 +1,7 @@
 import { Reddit } from '@icons-pack/react-simple-icons';
 import React from 'react';
 
-import './ContactCard.css';
+import './ContactCard.scss';
 
 const RedditCard = () => (
   <div className='card card--contact'>
diff --git a/src/components/contact/TelegramCard.tsx b/src/components/contact/TelegramCard.tsx
index 7e4910e4..f68acdf3 100644
--- a/src/components/contact/TelegramCard.tsx
+++ b/src/components/contact/TelegramCard.tsx
@@ -1,7 +1,7 @@
 import { Telegram } from '@icons-pack/react-simple-icons';
 import React from 'react';
 
-import './ContactCard.css';
+import './ContactCard.scss';
 
 const TelegramCard = () => (
   <div className='card card--contact'>
diff --git a/src/components/contact/TwitterCard.tsx b/src/components/contact/TwitterCard.tsx
index 140ceeb3..4868e511 100644
--- a/src/components/contact/TwitterCard.tsx
+++ b/src/components/contact/TwitterCard.tsx
@@ -1,7 +1,7 @@
 import { Twitter } from '@icons-pack/react-simple-icons';
 import React from 'react';
 
-import './ContactCard.css';
+import './ContactCard.scss';
 
 const TwitterCard = () => (
   <div className='card card--contact'>
diff --git a/src/components/home/CallToAction.module.css b/src/components/home/CallToAction.module.scss
similarity index 100%
rename from src/components/home/CallToAction.module.css
rename to src/components/home/CallToAction.module.scss
diff --git a/src/components/home/CallToAction.tsx b/src/components/home/CallToAction.tsx
index c346215e..93376c9b 100644
--- a/src/components/home/CallToAction.tsx
+++ b/src/components/home/CallToAction.tsx
@@ -1,7 +1,7 @@
 import Link from '@docusaurus/Link';
 import React from 'react';
 
-import styles from './CallToAction.module.css';
+import styles from './CallToAction.module.scss';
 
 export default function CallToAction() {
   return (
diff --git a/src/components/home/ClientSection.module.css b/src/components/home/ClientSection.module.scss
similarity index 100%
rename from src/components/home/ClientSection.module.css
rename to src/components/home/ClientSection.module.scss
diff --git a/src/components/home/ClientSection.tsx b/src/components/home/ClientSection.tsx
index ab43e78c..84b51590 100644
--- a/src/components/home/ClientSection.tsx
+++ b/src/components/home/ClientSection.tsx
@@ -5,8 +5,8 @@ import { Android, Apple, Roku, Amazon, Kodi } from '@icons-pack/react-simple-ico
 import Icon from '@mdi/react';
 import { mdiPlusThick, mdiMonitor, mdiWeb } from '@mdi/js';
 
-import landingSectionStyles from './LandingSection.module.css';
-import styles from './ClientSection.module.css';
+import landingSectionStyles from './LandingSection.module.scss';
+import styles from './ClientSection.module.scss';
 
 export default function ClientSection() {
   return (
diff --git a/src/components/home/FreedomSection.tsx b/src/components/home/FreedomSection.tsx
index bc104a9b..9fee8c0f 100644
--- a/src/components/home/FreedomSection.tsx
+++ b/src/components/home/FreedomSection.tsx
@@ -5,7 +5,7 @@ import { mdiAccountGroup, mdiLock, mdiCurrencyUsdOff } from '@mdi/js';
 import clsx from 'clsx';
 import React from 'react';
 
-import landingSectionStyles from './LandingSection.module.css';
+import landingSectionStyles from './LandingSection.module.scss';
 
 const ICON_SIZE = 48;
 
diff --git a/src/components/home/HomepageFeatures.module.css b/src/components/home/HomepageFeatures.module.scss
similarity index 100%
rename from src/components/home/HomepageFeatures.module.css
rename to src/components/home/HomepageFeatures.module.scss
diff --git a/src/components/home/HomepageFeatures.tsx b/src/components/home/HomepageFeatures.tsx
index eea30c6a..38bc0575 100644
--- a/src/components/home/HomepageFeatures.tsx
+++ b/src/components/home/HomepageFeatures.tsx
@@ -4,8 +4,8 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/css';
 import 'swiper/css/navigation';
-import landingSectionStyles from './LandingSection.module.css';
-import styles from './HomepageFeatures.module.css';
+import landingSectionStyles from './LandingSection.module.scss';
+import styles from './HomepageFeatures.module.scss';
 import clsx from 'clsx';
 
 type Feature = {
diff --git a/src/components/home/InActionSection.tsx b/src/components/home/InActionSection.tsx
index 43967de7..163e2039 100644
--- a/src/components/home/InActionSection.tsx
+++ b/src/components/home/InActionSection.tsx
@@ -10,7 +10,7 @@ import PlaybackImageUrl from '../../../static/images/screenshots/home/10.8-playb
 
 import 'swiper/css';
 import 'swiper/css/pagination';
-import landingSectionStyles from './LandingSection.module.css';
+import landingSectionStyles from './LandingSection.module.scss';
 
 const screenshots = [
   {
diff --git a/src/components/home/LandingSection.module.css b/src/components/home/LandingSection.module.scss
similarity index 100%
rename from src/components/home/LandingSection.module.css
rename to src/components/home/LandingSection.module.scss
diff --git a/src/css/custom.css b/src/css/custom.scss
similarity index 100%
rename from src/css/custom.css
rename to src/css/custom.scss
diff --git a/src/css/swiper.css b/src/css/swiper.scss
similarity index 100%
rename from src/css/swiper.css
rename to src/css/swiper.scss
diff --git a/src/pages/clients/index.module.css b/src/pages/clients/index.module.scss
similarity index 100%
rename from src/pages/clients/index.module.css
rename to src/pages/clients/index.module.scss
diff --git a/src/pages/clients/index.tsx b/src/pages/clients/index.tsx
index c8885af7..b91fe623 100644
--- a/src/pages/clients/index.tsx
+++ b/src/pages/clients/index.tsx
@@ -10,7 +10,7 @@ import Pill from '../../components/common/Pill';
 import { Client, Clients, DeviceType } from '../../data/clients';
 import Platform, { FeaturedClientPlatforms } from '../../data/platform';
 
-import styles from './index.module.css';
+import styles from './index.module.scss';
 
 type ClientFilter = {
   recommended: boolean;
diff --git a/src/pages/contribute.module.css b/src/pages/contribute.module.scss
similarity index 100%
rename from src/pages/contribute.module.css
rename to src/pages/contribute.module.scss
diff --git a/src/pages/contribute.tsx b/src/pages/contribute.tsx
index 5cf391b9..fae4d9b3 100644
--- a/src/pages/contribute.tsx
+++ b/src/pages/contribute.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import ContributorGuide from '../components/contribute/ContributorGuide';
 import Hero from '../components/common/Hero';
 
-import styles from './contribute.module.css';
+import styles from './contribute.module.scss';
 
 export default function Contribute() {
   return (
diff --git a/src/pages/downloads/index.module.css b/src/pages/downloads/index.module.scss
similarity index 100%
rename from src/pages/downloads/index.module.css
rename to src/pages/downloads/index.module.scss
diff --git a/src/pages/downloads/index.tsx b/src/pages/downloads/index.tsx
index 68110297..335a2a0d 100644
--- a/src/pages/downloads/index.tsx
+++ b/src/pages/downloads/index.tsx
@@ -8,7 +8,7 @@ import Pill from '../../components/common/Pill';
 import DownloadDetails from '../../components/downloads/DownloadDetails';
 import { Downloads, OsType } from '../../data/downloads';
 
-import styles from './index.module.css';
+import styles from './index.module.scss';
 
 export default function DownloadsPage({ osType = OsType.Linux }: { osType?: OsType }) {
   const [isStableLinks, setIsStableLinks] = useState<boolean>(true);