diff --git a/src/pages/ContentScripts/features/developer-networks/react-modal.scss b/src/pages/ContentScripts/features/developer-networks/react-modal.scss
index ba44e325..e9528f71 100644
--- a/src/pages/ContentScripts/features/developer-networks/react-modal.scss
+++ b/src/pages/ContentScripts/features/developer-networks/react-modal.scss
@@ -20,6 +20,6 @@
     rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
   outline: transparent solid 3px;
   border-radius: 2px;
-  background: var(--color-canvas-default);
-  color: var(--color-fg-default);
+  background: var(--bgColor-default);
+  color: var(--fgColor-default);
 }
diff --git a/src/pages/ContentScripts/features/oss-gpt/rcw.scss b/src/pages/ContentScripts/features/oss-gpt/rcw.scss
index 8b6ee835..20a9b936 100644
--- a/src/pages/ContentScripts/features/oss-gpt/rcw.scss
+++ b/src/pages/ContentScripts/features/oss-gpt/rcw.scss
@@ -28,7 +28,7 @@
   margin-left: auto;
 }
 .rcw-client .rcw-message-text {
-  background-color: var(--color-accent-subtle);
+  background-color: var(--bgColor-accent-muted);
   border-radius: 10px;
   max-width: 350px;
   padding: 15px;
@@ -45,7 +45,7 @@
   align-items: flex-start;
 }
 .rcw-response .rcw-message-text {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-inset);
   border-radius: 10px;
   max-width: 450px;
   padding: 15px;
@@ -100,7 +100,7 @@
   color: #fff;
 }
 .rcw-conversation-container .rcw-header {
-  background-color: var(--color-header-bg);
+  background-color: var(--header-bgColor);
   border-radius: 10px 10px 0 0;
   color: #fff;
   display: flex;
@@ -175,7 +175,7 @@
   display: flex;
 }
 .loader-container {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-inset);
   border-radius: 10px;
   padding: 15px;
   max-width: 215px;
@@ -220,7 +220,7 @@
   }
 }
 .rcw-messages-container {
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default);
   height: 55vh;
   max-height: 600px;
   overflow-y: auto;
@@ -830,7 +830,7 @@ img.rcw-picker-icon {
   animation-name: slide-in;
   animation-fill-mode: forwards;
   align-self: flex-end;
-  background-color: var(--color-header-bg);
+  background-color: var(--header-bgColor);
   border: 0;
   border-radius: 50%;
   box-shadow: 0 2px 10px 1px var(--color-shadow);
diff --git a/src/pages/ContentScripts/index.scss b/src/pages/ContentScripts/index.scss
index 3862433e..e11c8faf 100644
--- a/src/pages/ContentScripts/index.scss
+++ b/src/pages/ContentScripts/index.scss
@@ -5,8 +5,7 @@
 }
 
 .hypertrons-crx-border {
-  background-color: var(--color-canvas-default);
-  border: 1px solid var(--color-border-default);
+  border: 1px solid var(--borderColor-default);
   border-radius: 6px;
 }
 
@@ -16,10 +15,10 @@
   margin: 0;
   font-size: 14px;
   line-height: 35px;
-  background-color: var(--color-canvas-subtle);
-  border: 1px solid var(--color-border-default);
-  border-bottom: 0;
-  border-radius: 6px;
+  background-color: var(--bgColor-inset);
+  border: 1px solid var(--borderColor-default);
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
 }
 .color-text-secondary {
   margin-left: 35px;