diff --git a/src/components/markup.css b/src/components/markup.css
deleted file mode 100644
index 482b37237..000000000
--- a/src/components/markup.css
+++ /dev/null
@@ -1,129 +0,0 @@
-[data-markup] {
-  @apply whitespace-pre-wrap;
-}
-
-[data-markup] h1 {
-  @apply text-3xl font-semibold;
-}
-
-[data-markup] h2 {
-  @apply text-2xl font-semibold;
-}
-
-[data-markup] h3 {
-  @apply text-xl font-black;
-}
-
-[data-markup] p {
-  @apply mb-4 whitespace-pre-wrap;
-}
-
-[data-markup] p:last-child {
-  @apply mb-0;
-}
-
-[data-markup] a {
-  @apply text-primary-600 dark:text-accent-blue hover:underline;
-}
-
-[data-markup] strong {
-  @apply font-bold;
-}
-
-[data-markup] em {
-  @apply italic;
-}
-
-[data-markup] ul,
-[data-markup] ol {
-  @apply pl-10 mb-4;
-}
-
-[data-markup] ul {
-  @apply list-disc list-outside;
-}
-
-[data-markup] ol {
-  @apply list-decimal list-outside;
-}
-
-[data-markup] blockquote {
-  @apply py-1 pl-4 mb-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400;
-}
-
-[data-markup] table {
-  @apply table-auto w-full bg-gray-200 dark:bg-gray-900 my-4 rounded-md;
-}
-
-[data-markup] table th, table td {
-  @apply text-center px-2;
-}
-
-[data-markup] table th {
-  @apply border-b-2 border-gray-600;
-}
-
-[data-markup] code,
-[data-markup] pre {
-  @apply cursor-text font-mono;
-}
-
-[data-markup] p > code,
-[data-markup] pre {
-  @apply bg-gray-100 dark:bg-primary-800;
-}
-
-/* Inline code */
-[data-markup] p > code {
-  @apply py-0.5 px-1 rounded-sm;
-}
-
-/* Code block */
-[data-markup] pre {
-  @apply py-2 px-3 mb-4 leading-6 overflow-x-auto rounded-md break-all;
-}
-
-[data-markup] pre:last-child {
-  @apply mb-0;
-}
-
-/* Emojis */
-[data-markup] img.emojione {
-  @apply w-5 h-5 m-0;
-}
-
-/* Markdown inline images (Pleroma) */
-[data-markup] img:not(.emojione) {
-  @apply max-h-[500px] mx-auto rounded-sm;
-}
-
-/* User setting to underline links */
-body.underline-links [data-markup] a {
-  @apply underline;
-}
-
-[data-markup].big-emoji img.emojione {
-  @apply inline w-9 h-9 p-1;
-}
-
-[data-markup] .status-link {
-  @apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue;
-}
-
-[data-markup] .invisible {
-  font-size: 0 !important;
-  line-height: 0 !important;
-  display: inline-block;
-  width: 0;
-  height: 0;
-  position: absolute;
-}
-
-[data-markup] .invisible img,
-[data-markup] .invisible svg {
-  margin: 0 !important;
-  border: 0 !important;
-  padding: 0 !important;
-  width: 0 !important;
-  height: 0 !important;
-}
diff --git a/src/components/markup.tsx b/src/components/markup.tsx
index 46a5c5c8e..2241c05cb 100644
--- a/src/components/markup.tsx
+++ b/src/components/markup.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import Text, { IText } from './ui/text/text';
-import './markup.css';
 
 interface IMarkup extends IText {
 }
diff --git a/src/styles/application.scss b/src/styles/application.scss
index 20a654607..13d01817d 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -3,6 +3,7 @@
 @import 'ui';
 @import 'emoji-picker';
 @import 'accessibility';
+@import 'markup';
 
 // COMPONENTS
 @import 'components/modal';
diff --git a/src/styles/markup.scss b/src/styles/markup.scss
new file mode 100644
index 000000000..c3134df93
--- /dev/null
+++ b/src/styles/markup.scss
@@ -0,0 +1,133 @@
+[data-markup], [data-lexical-editor] {
+  @apply whitespace-pre-wrap;
+
+  h1 {
+    @apply text-3xl font-semibold;
+  }
+  
+  h2 {
+    @apply text-2xl font-semibold;
+  }
+  
+  h3 {
+    @apply text-xl font-black;
+  }
+  
+  p {
+    @apply mb-4 whitespace-pre-wrap;
+  }
+  
+  p:last-child {
+    @apply mb-0;
+  }
+  
+  a {
+    @apply text-primary-600 dark:text-accent-blue hover:underline;
+  }
+  
+  strong {
+    @apply font-bold;
+  }
+  
+  em {
+    @apply italic;
+  }
+  
+  ul,
+  ol {
+    @apply pl-10 mb-4;
+  }
+  
+  ul {
+    @apply list-disc list-outside;
+  }
+  
+  ol {
+    @apply list-decimal list-outside;
+  }
+  
+  blockquote {
+    @apply py-1 pl-4 mb-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400;
+  }
+  
+  table {
+    @apply table-auto w-full bg-gray-200 dark:bg-gray-900 my-4 rounded-md;
+  }
+  
+  table th, table td {
+    @apply text-center px-2;
+  }
+  
+  table th {
+    @apply border-b-2 border-gray-600;
+  }
+  
+  code,
+  pre {
+    @apply cursor-text font-mono;
+  }
+  
+  p > code,
+  pre {
+    @apply bg-gray-100 dark:bg-primary-800;
+  }
+  
+  /* Inline code */
+  p > code {
+    @apply py-0.5 px-1 rounded-sm;
+  }
+  
+  /* Code block */
+  pre {
+    @apply py-2 px-3 mb-4 leading-6 overflow-x-auto rounded-md break-all;
+  }
+  
+  pre:last-child {
+    @apply mb-0;
+  }
+  
+  /* Emojis */
+  img.emojione {
+    @apply w-5 h-5 m-0;
+  }
+  
+  /* Markdown inline images (Pleroma) */
+  img:not(.emojione) {
+    @apply max-h-[500px] mx-auto rounded-sm;
+  }
+  
+  &.big-emoji img.emojione {
+    @apply inline w-9 h-9 p-1;
+  }
+  
+  .status-link {
+    @apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue;
+  }
+  
+  .invisible {
+    font-size: 0 !important;
+    line-height: 0 !important;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+  
+  .invisible img,
+  .invisible svg {
+    margin: 0 !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+}
+
+/* User setting to underline links */
+body.underline-links {
+  [data-markup], [data-lexical-editor] {
+    a {
+      @apply underline;
+    }
+  }
+}