diff --git a/frontend/src/pages/oj/App.vue b/frontend/src/pages/oj/App.vue
index 2a3dbbd6..baf44bb3 100644
--- a/frontend/src/pages/oj/App.vue
+++ b/frontend/src/pages/oj/App.vue
@@ -167,15 +167,15 @@ h1.main-title {
 
 :root.dark.problem {
   /* Problem Solving Page */
-  --ps-background-color: #181c25;
+  --ps-background-color: #263238;
   /* Problem Solving Page - Inner Content */
-  --ps-content-color: #1f2430;
-  --ps-content-text-color: #b2c0cc;
+  --ps-content-color: #2e3c43;
+  --ps-content-text-color: #ececec;
   --ps-content-title-color: #ffffff;
-  --ps-content-pre-background-color: #1a1f29;
-  --ps-content-pre-border-color: rgba(140, 140, 140, 0.29);
-  --ps-content-code-background-color: #1b212c;
-  --ps-content-code-text-color: #ffffff;
+  --ps-content-pre-background-color: #233038;
+  --ps-content-pre-border-color: rgba(160, 160, 160, 0.2);
+  --ps-content-code-background-color: #1e2a30;
+  --ps-content-code-text-color: #ececec;
   /* Code Submission */
   --submit-btn-color: #343f5a;
   --submit-btn-hover-color: #364361;
@@ -213,7 +213,7 @@ h1.main-title {
   --ai-assistant-close-hover-text-color: #ffffff;
   --ai-assistant-error-text-color: #ff9e9e;
 
-  --bg-color: #1f2430;
+  --bg-color: #263238;
   --text-color: #ffffff;
   --difficulty-color: #5a6885;
   --custom-btn-hover-color: #465477;
diff --git a/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue b/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue
index 44ddd534..30d92292 100644
--- a/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue
+++ b/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue
@@ -210,6 +210,16 @@ export default {
   border: 1px solid var(--border-color);
 }
 
+.cm-s-ayu-mirage.CodeMirror,
+.cm-s-ayu-mirage .CodeMirror-scroll {
+  background-color: #2e3c43 !important;
+}
+
+.cm-s-ayu-mirage .CodeMirror-gutters {
+  background-color: #263238 !important;
+  border-right: 1px solid rgba(160, 160, 160, 0.15) !important;
+}
+
 .cm-s-ayu-mirage .CodeMirror-matchingbracket {
   text-decoration: none !important;
   color: white !important;
diff --git a/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue b/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue
index 1462a331..794c8e5f 100644
--- a/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue
+++ b/frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue
@@ -421,7 +421,7 @@ export default defineComponent({
       font-weight: 400;
       line-height: 1.6;
       letter-spacing: 0.01em;
-      color: #111111 !important;
+      color: var(--ps-content-text-color) !important;
     }
 
     .sample {