diff --git a/install/package.json b/install/package.json
index 8848d086aa..9944f2fa3e 100644
--- a/install/package.json
+++ b/install/package.json
@@ -39,6 +39,7 @@
         "body-parser": "1.20.0",
         "bootbox": "https://github.com/makeusabrew/bootbox.git#v6-wip",
         "bootstrap": "5.2.0",
+        "bootswatch": "5.2.0",
         "chalk": "4.1.2",
         "chart.js": "2.9.4",
         "cli-graph": "3.2.2",
@@ -86,7 +87,6 @@
         "morgan": "1.10.0",
         "mousetrap": "1.6.5",
         "multiparty": "4.2.3",
-        "@nodebb/bootswatch": "3.4.2",
         "nconf": "0.12.0",
         "nodebb-plugin-2factor": "5.0.2",
         "nodebb-plugin-composer-default": "8.0.0",
diff --git a/public/scss/generics.scss b/public/scss/generics.scss
index 98d70f41f1..d29b30c3bc 100644
--- a/public/scss/generics.scss
+++ b/public/scss/generics.scss
@@ -70,7 +70,7 @@ $brand-danger:          #d9534f;
 @mixin user-icon() {
 	display: inline-block;
 	text-align: center;
-	color: $gray-300;
+	color: $gray-light;
 	font-weight: normal;
 	vertical-align: middle;
 	overflow: hidden;	/* stops alt text from overflowing past boundaries if image does not load */
@@ -175,7 +175,7 @@ $brand-danger:          #d9534f;
 	position: absolute;
 	text-align: center;
 	font-size: 24px;
-	color: $gray-300;
+	color: $gray-light;
 	width: 100%;
 	display: none;
 }
diff --git a/public/scss/overrides.scss b/public/scss/overrides.scss
new file mode 100644
index 0000000000..7c733e7ad6
--- /dev/null
+++ b/public/scss/overrides.scss
@@ -0,0 +1 @@
+// global bs5 overrides if necessary
\ No newline at end of file
diff --git a/src/meta/css.js b/src/meta/css.js
index 4661fe7c5e..147f20eed1 100644
--- a/src/meta/css.js
+++ b/src/meta/css.js
@@ -23,42 +23,47 @@ CSS.supportedSkins = [
 ];
 
 const buildImports = {
-	client: function (source) {
+	client: function (source, themeData) {
 		return [
-			'@import "bootstrap/scss/bootstrap";',
-			'@import "../../public/scss/mixins.scss";',
-			'@import "../../public/scss/generics.scss";',
-			'@import "../../public/scss/responsive-utilities.scss";',
+			'@import "mixins";',
+			'@import "generics";',
 			'@import "fontawesome";',
-			'@import "./theme";',
+			boostrapImport(themeData),
+			'@import "responsive-utilities";',
 			source,
-
-			'@import "../../public/scss/jquery-ui.scss";',
-			'@import "../node_modules/@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
-			'@import "../node_modules/cropperjs/dist/cropper";',
-
-			'@import "../../public/scss/flags.scss";',
-
-			'@import "../../public/scss/global.scss";',
-			'@import "../../public/scss/modals.scss";',
+			'@import "jquery-ui";',
+			'@import "@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
+			'@import "cropperjs/dist/cropper";',
+			'@import "flags";',
+			'@import "global";',
+			'@import "modals";',
 		].join('\n');
 	},
 	admin: function (source) {
 		return [
 			'@import "bootstrap/scss/bootstrap";',
-			'@import "../../public/scss/mixins.scss";',
-			'@import "../public/scss/generics.scss";',
-			'@import "../../public/scss/responsive-utilities.scss";',
+			'@import "mixins.scss";',
+			'@import "generics.scss";',
+			'@import "responsive-utilities.scss";',
 			'@import "fontawesome";',
-			'@import "../public/scss/admin/admin.scss";',
+			'@import "admin/admin.scss";',
 			source,
-			'@import "../../public/scss/jquery-ui.scss";',
-			'@import "../node_modules/@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
+			'@import "jquery-ui.scss";',
+			'@import "@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
 			'@import "../public/vendor/mdl/material";',
 		].join('\n');
 	},
 };
 
+function boostrapImport(themeData) {
+	const { bootswatchSkin } = themeData;
+	return [
+		bootswatchSkin ? `@import "bootswatch/dist/${bootswatchSkin}/variables";` : '',
+		'@import "./theme";',
+		bootswatchSkin ? `@import "bootswatch/dist/${bootswatchSkin}/bootswatch";` : '',
+	].join('\n');
+}
+
 async function filterMissingFiles(filepaths) {
 	const exists = await Promise.all(
 		filepaths.map(async (filepath) => {
@@ -118,19 +123,15 @@ async function getBundleMetadata(target) {
 			target = 'client';
 		}
 	}
-	let skinImport = [];
+
+	let themeData = null;
 	if (target === 'client') {
-		const themeData = await db.getObjectFields('config', ['theme:type', 'theme:id', 'bootswatchSkin']);
+		themeData = await db.getObjectFields('config', ['theme:type', 'theme:id', 'bootswatchSkin']);
 		const themeId = (themeData['theme:id'] || 'nodebb-theme-persona');
 		const baseThemePath = path.join(nconf.get('themes_path'), (themeData['theme:type'] && themeData['theme:type'] === 'local' ? themeId : 'nodebb-theme-vanilla'));
 		paths.unshift(baseThemePath);
 
 		themeData.bootswatchSkin = skin || themeData.bootswatchSkin;
-		if (themeData && themeData.bootswatchSkin) {
-			skinImport.push(`\n@import "./@nodebb/bootswatch/${themeData.bootswatchSkin}/variables.less";`);
-			skinImport.push(`\n@import "./@nodebb/bootswatch/${themeData.bootswatchSkin}/bootswatch.less";`);
-		}
-		skinImport = skinImport.join('');
 	}
 
 	const [scssImports, cssImports, acpScssImports] = await Promise.all([
@@ -144,8 +145,8 @@ async function getBundleMetadata(target) {
 		return await getImports(filteredFiles, prefix, extension);
 	}
 
-	let imports = `${skinImport}\n${cssImports}\n${scssImports}\n${acpScssImports}`;
-	imports = buildImports[target](imports);
+	let imports = `${cssImports}\n${scssImports}\n${acpScssImports}`;
+	imports = buildImports[target](imports, themeData);
 
 	return { paths: paths, imports: imports };
 }