diff --git a/frontend/assets/style/editor.css b/frontend/assets/style/editor.css
new file mode 100644
index 00000000..ca217394
--- /dev/null
+++ b/frontend/assets/style/editor.css
@@ -0,0 +1,43 @@
+/* dark mode styles */
+.theme--dark .tui-editor-contents h1 {
+  color: #fff; /* inversion of #000 */
+}
+
+.theme--dark .tui-editor-contents h2,
+.theme--dark .tui-editor-contents h3,
+.theme--dark .tui-editor-contents h4,
+.theme--dark .tui-editor-contents h5,
+.theme--dark .tui-editor-contents h6,
+.theme--dark .tui-editor-contents code span {
+  color: #ccc; /* inversion of #333 */
+}
+
+.theme--dark .tui-editor-contents blockquote {
+  color: #888; /* inversion of #777777 */
+}
+
+.theme--dark .tui-editor-contents ul,
+.theme--dark .tui-editor-contents menu,
+.theme--dark .tui-editor-contents ol,
+.theme--dark .tui-editor-contents dir,
+.theme--dark .tui-editor-contents p,
+.theme--dark .tui-editor-contents table {
+  color: #aaa; /* inversion of #555555 */
+}
+
+.theme--dark .tui-editor-contents table td {
+  border: #151515; /* inversion of #eaeaea */
+}
+
+.theme--dark .tui-editor-contents table th {
+  border: #8d8884; /* inversion of #72777b */
+  background-color: #847e7b; /* inversion of #7b8184 */
+}
+
+.theme--dark .tui-editor-contents pre {
+  background-color: #0a0807; /* inversion of #f5f7f8 */
+}
+
+.theme--dark .tui-editor-contents code {
+  color: #3e8774; /* inversion of #c1788b */
+}
diff --git a/frontend/components/organisms/annotation/GuidelineCard.vue b/frontend/components/organisms/annotation/GuidelineCard.vue
index 7a62e020..0bc86c3f 100644
--- a/frontend/components/organisms/annotation/GuidelineCard.vue
+++ b/frontend/components/organisms/annotation/GuidelineCard.vue
@@ -17,6 +17,7 @@ import 'tui-editor/dist/tui-editor-contents.css'
 import 'highlight.js/styles/github.css'
 import { Viewer } from '@toast-ui/vue-editor'
 import BaseCard from '@/components/molecules/BaseCard'
+import '@/assets/style/editor.css'
 
 export default {
   components: {
@@ -39,42 +40,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-/* dark mode styles */
-.theme--dark >>> .tui-editor-contents h1 {
-  color: #fff; /* inversion of #000 */
-}
-.theme--dark >>> .tui-editor-contents h2,
-.theme--dark >>> .tui-editor-contents h3,
-.theme--dark >>> .tui-editor-contents h4,
-.theme--dark >>> .tui-editor-contents h5,
-.theme--dark >>> .tui-editor-contents h6,
-.theme--dark >>> .tui-editor-contents code span {
-  color: #ccc; /* inversion of #333 */
-}
-.theme--dark >>> .tui-editor-contents blockquote {
-  color: #888; /* inversion of #777777 */
-}
-.theme--dark >>> .tui-editor-contents ul,
-.theme--dark >>> .tui-editor-contents menu,
-.theme--dark >>> .tui-editor-contents ol,
-.theme--dark >>> .tui-editor-contents dir,
-.theme--dark >>> .tui-editor-contents p,
-.theme--dark >>> .tui-editor-contents table {
-  color: #aaa; /* inversion of #555555 */
-}
-.theme--dark >>> .tui-editor-contents table td {
-border: #151515; /* inversion of #eaeaea */
-}
-.theme--dark >>> .tui-editor-contents table th {
-  border: #8d8884; /* inversion of #72777b */
-  background-color: #847e7b; /* inversion of #7b8184 */
-}
-.theme--dark >>> .tui-editor-contents pre {
-  background-color: #0a0807; /* inversion of #f5f7f8 */
-}
-.theme--dark >>> .tui-editor-contents code {
-  color: #3e8774; /* inversion of #c1788b */
-}
-</style>
diff --git a/frontend/pages/projects/_id/guideline/index.vue b/frontend/pages/projects/_id/guideline/index.vue
index 95e666bb..f6d96902 100644
--- a/frontend/pages/projects/_id/guideline/index.vue
+++ b/frontend/pages/projects/_id/guideline/index.vue
@@ -13,6 +13,7 @@ import 'tui-editor/dist/tui-editor-contents.css'
 import 'codemirror/lib/codemirror.css'
 import { Editor } from '@toast-ui/vue-editor'
 import { mapState, mapActions } from 'vuex'
+import '@/assets/style/editor.css'
 
 export default {
   layout: 'project',