diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index b14f9ff..6d179de 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -37,6 +37,10 @@
     max-width: calc(100vw - 40px);
   }
 
+  .compose-box.direct-reply {
+    background-color: var(--status-direct-background);
+  }
+
   .compose-box.slim-size {
     width: 540px;
     max-width: calc(100vw - 60px);
@@ -145,11 +149,12 @@
     },
     store: () => store,
     computed: {
-      computedClassName: (overLimit, realm, size) => {
+      computedClassName: (overLimit, realm, size, postPrivacyKey, isReply) => {
         return classname(
           'compose-box',
           overLimit && 'over-char-limit',
-          size === 'slim' && 'slim-size'
+          size === 'slim' && 'slim-size',
+          isReply && postPrivacyKey === 'direct' && 'direct-reply'
         )
       },
       hideAndFadeIn: (hidden) => {
diff --git a/routes/_components/status/StatusComposeBox.html b/routes/_components/status/StatusComposeBox.html
index 29d4e92..290f758 100644
--- a/routes/_components/status/StatusComposeBox.html
+++ b/routes/_components/status/StatusComposeBox.html
@@ -3,6 +3,7 @@
               size="slim"
               autoFocus="true"
               hideBottomBorder="true"
+              isReply="true"
               replyVisibility="{{visibility}}"
               replySpoiler="{{spoilerText}}"
               on:postedStatus="onPostedStatus()"
@@ -11,7 +12,6 @@
 <style>
   .status-article-compose-box {
     grid-area: compose;
-    background: var(--main-bg);
   }
 </style>
 <script>