diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 1f9e751f74a..44dc7f03137 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -436,7 +436,17 @@ pre {
 
 .panel-primary > .panel-heading {
   background-color: transparent;
-  border-color: var(--color-primary);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.solution-viewer,
+.solution-viewer pre {
+  margin-bottom: 0px;
+}
+
+.solution-viewer {
+  border-color: var(--primary-color);
 }
 
 .has-success .help-block,
diff --git a/client/src/components/settings/SolutionViewer.js b/client/src/components/settings/SolutionViewer.js
index 2a0a39154f8..0e3ce7955d1 100644
--- a/client/src/components/settings/SolutionViewer.js
+++ b/client/src/components/settings/SolutionViewer.js
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import { Panel } from '@freecodecamp/react-bootstrap';
 import Prism from 'prismjs';
 
-import './solution-viewer.css';
-
 const prismLang = {
   css: 'css',
   js: 'javascript',
diff --git a/client/src/components/settings/solution-viewer.css b/client/src/components/settings/solution-viewer.css
deleted file mode 100644
index 6364669d712..00000000000
--- a/client/src/components/settings/solution-viewer.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.solution-viewer,
-.solution-viewer pre {
-  margin-bottom: 0px;
-}
-
-.solution-viewer {
-  border-color: var(--color-primary);
-}